Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #752449

    Hello. Please see this image. I had to adjust the height to make this more responsive on other devices. As you can see in the image, the background is stretched on IPHONE PORTRAIT. It might not be possible to fix that, so I would be open to replacing the image with a solid color background.

    Thank you,


    Hey rlogan2334,

    Have you tried using media queries to replace the bg with a more appropriately sized image when on mobile?
    Best regards,
    Jordan Shannon


    Hello. I haven’t tried or done that before. Can you give me a hint as to where to start and then I should be able to get it dialed in?



    I actually have a solution that may serve you better. You can create a second full width slider section, with a mobile appropriate image. You can hide this section on desktops. And then, you can simply choose to hide your current slider on mobile devices. All of this is done through the advanced editor. I hope that makes sense, and if not I can surely help further.

    Best regards,
    Jordan Shannon


    Hey. I think I get what you’re thinking. The only part the loses me is the “mobile appropriate image”. I’m only familiar with setting an image and letting the theme resize it down.




    I mean edit the image size in an editor to better accommodate the dimensions of a mobile device.

    Best regards,
    Jordan Shannon


    Yes, understood. The following is my CSS for the Full Width Slider, on iPad landscape and portrait. With that info, how would I adjust the image as you’re suggesting, to make it look good on iPhone landscape and portrait? Again, I’ve never done that before. I usually just optimize (TinyPNG) a 1500×1000 image for larger elements, upload it and let the theme go to work.

    @media screen and (max-width: 1024px) { .avia-slideshow-inner, .avia-slideshow-inner img { height: 400px!important; } }
    @media screen and (max-width: 768px) { .avia-slideshow-inner, .avia-slideshow-inner img { height: 400px!important; } }



    Please adjust the css modifications:

    @media only screen and (max-width: 767px) {
        .avia-slideshow-inner, .avia-slideshow-inner img {
            height: 400px !important;
        .avia-slideshow-inner img {
            min-width: 1200px !important;
            margin-left: -600px !important;

    Adjust the value as needed.



    Good to go. Thank you sir!

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Full Width Easy Slider’ is closed to new replies.