Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • February 27, 2017 at 8:12 pm #752449
    WP Turned UP

    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,
    Ryan

    February 27, 2017 at 8:44 pm #752476
    Jordan Shannon

    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

    February 27, 2017 at 8:48 pm #752481
    WP Turned UP

    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?

    February 27, 2017 at 10:16 pm #752559
    Jordan Shannon

    Hi,

    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

    February 28, 2017 at 4:36 am #752735
    WP Turned UP

    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.

    Thanks,
    Ryan

    February 28, 2017 at 8:17 am #752773
    Jordan Shannon

    Hi,

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

    Best regards,
    Jordan Shannon

    February 28, 2017 at 11:19 pm #753319
    WP Turned UP

    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; } }

    March 6, 2017 at 8:25 am #756218
    Ismael

    Hey!

    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.

    Cheers!
    Ismael

    March 14, 2017 at 4:09 pm #760801
    WP Turned UP

    Good to go. Thank you sir!

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Full Width Easy Slider’ is closed to new replies.