Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • October 7, 2016 at 4:06 pm #696568
    rosewoodva

    Hi,

    I followed the documentation to make the Advanced Layer Slider Background image for this page: http://laurenhardyphotography.ca/test

    The slider is not responsive on mobile (horizontal or vertical) and zooms way in on the image. I would like the whole image to show.

    I set the slider to width 100% and enabled responsiveness. Can you please help?

    I would eventually like this to replace the image on the homepage with the same text, etc. http://laurenhardyphotography.ca

    Thanks!

    October 8, 2016 at 8:42 am #696839
    Rikard

    Hi rosewoodva,

    Maybe you could try a Color Section element with background instead if you are only going to have a static image? Note that loss of image data when having background images is inevitable due to the variation of screens sizes.

    Thanks,
    Rikard

    October 8, 2016 at 6:35 pm #696921
    rosewoodva

    Hi Rikard,

    I prefer to have the color section background image, as is already on the homepage. However this is not responsive either. I read documentation that suggested I try a Slider background.

    If there is a way to make the color section image 100% responsive on mobile, please let me know. Currently it is not responsive at all and zooms way in on mobile vertical view: http://laurenhardyphotography.ca

    Thank you,
    Deanna

    October 8, 2016 at 6:40 pm #696922
    rosewoodva

    Basically I want something that will have the same type of formatting, a static image that will show behind the transparent menu, and be fully responsive on mobile.

    Please tell me what the best recommendation is for image type: Easy slider, Advanced Layerslider, etc.?

    October 9, 2016 at 9:03 am #697017
    Rikard

    Hi,

    Maybe you could try to create a new section to only show on mobile and upload an image better adapted to small screens? You can then give your sections unique IDs and show/hide them for the correct screen size using CSS: 

    @media only screen and (min-width: 768px) {
 #section-desktop {
display:block !important;
}
 #section-phone {
display:none !important;
}
}

@media only screen and (max-width: 767px) {
 #section-desktop {
display:none !important;
}
 #section-phone {
display:block !important;
}
}

    Best regards,
    Rikard

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.