#127699 Lawyer Theme: images in tablet landscape mode

Landing Forums JupiterX WordPress Theme Lawyer Theme: images in tablet landscape mode

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • Joe Gorecki

    When viewing the main header images on a page, on a tablet, they look good when the tablet is vertical. However, when the tablet is in landscape mode, the images are cropped very close in, making them look odd and unrecognizable. Is there a way to fix this? I would prefer, when in tablet landscape mode, that these images look more like they would in desktop mode.

    I’ve attached some images to show you what I mean.

    Thanks.

    Private
    Joe Gorecki
    This reply has been marked as private.
    Nodari Support Team

    Hi Joe

    This happens, particularly on iOS, when you have background-attachment:fixed. we can try to put background-attachment:scroll inside of a @media query, try this code please:

    @media only screen and (max-width: 1024px) {
    .elementor-16 .elementor-element.elementor-element-2dac6656:not(.elementor-motion-effects-element-type-background) {
    background-attachment: scroll !important;
    }
    }

    Thanks

    Joe Gorecki

    Thanks I will try that. Is there a way to add that custom CSS to all pages, or should I got to each page and add via “Additional CSS” field?

    Nodari Support Team

    Hi Joe

    It should work globally, so, no need to add it for each page 🙂

    Best wishes

    Private
    Joe Gorecki
    This reply has been marked as private.
    Nodari Support Team

    Hi Joe

    Try this code instead:

    @media only screen and (max-width: 1024px) {
    .elementor-16 .elementor-element.elementor-element-2dac6656:not(.elementor-motion-effects-element-type-background) {
        background-attachment: scroll !important;
        background-size: contain;
        background-position: initial;
    }
    }

    https://developer.apple.com/forums/thread/99883
    https://stackoverflow.com/questions/19045364/fixed-body-background-scrolls-with-the-page-on-ios7
    https://stackoverflow.com/questions/20443574/fixed-background-image-with-ios7

    Joe Gorecki

    Thanks. And when I can drop that into “Additional CSS” pane on the homepage customizer it should affect all other pages too?

    Alexander Hutsol Support Team

    Hello Joe,

    Please add the code in the Jupiter X > Theme Styles > Additional CSS section.

     

    Regards.

    Private
    Joe Gorecki
    This reply has been marked as private.
    Nodari Support Team

    HI Joe

    I’m sorry but that’s all 🙁 there is no other method to fix this issue by custom css, as you can see from the links I shared this problem is from IOS devices, another solution you may explore:
    . change background image setting from Fixed to scroll
    . Use parallax BG image instead
    . Use slider revolution with fixed BG, not sure but this slider has some different methods to fix BG images on IOS devices
    . You may also contact to Elementor support since this is ELementor issue

    I hope this helps 🙂

    • This reply was modified 2 months ago by Nodari.
    Joe Gorecki

    Is there a way to create a media query so that the background images are set to “scroll” only on iOS devices? And “fixed” on all other screens?

    Nodari Support Team

    Hi Joe

    Well, media query was my first solution, but it was not a working solution for IOS devices,

    Another solution is to create a copy of this section which will be designed only for mobile devices, then hide this section from mobile devices and show a copy.

    Have you tried to contact Elementor support about this problem?

    Regards

Viewing 13 posts - 1 through 13 (of 13 total)
You must be logged in to reply to this topic.
Login