Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • October 28, 2019 at 11:27 pm #1151947
    NMDKDesign

    Hi,
    i have one issue with the page i pasted in private content.
    I designed version 1 with color section and paralax image of the guy in the background (show only on big screens > 990px) and version 2 with a black color section and image above (show on tablet and mobile screens < 990px).

    Issue:
    If my client use his iPad Pro 9,7” in portrait mode version 2 will be displayed.
    If he turns his iPad to landscape mode, it switches to version 1.

    Question:
    How can i fix this issue / define own breakingpoints for all four devices?

    October 30, 2019 at 1:57 pm #1152324
    Nikko

    Hey NMDKDesign,

    It can be fixed through media queries.
    Try adding this css code in Quick CSS, located in Enfold > General Styling:

    @media only screen and (min-width: 1024px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape) {
    .responsive.av-no-preview #top #wrap_all #ueber.av-desktop-hide {
        display:none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait) {
    .responsive.av-no-preview #top #wrap_all #ueber.av-medium-hide {
        display:none;
    }	
}

    Hope it helps.

    Best regards,
    Nikko

    October 30, 2019 at 4:13 pm #1152398
    NMDKDesign

    Hello Nikko,

    that didn´t affect the behaviour.
    If i´m turning my iPad to landscape mode, it still switches image.

    October 30, 2019 at 4:51 pm #1152411
    Jordan Shannon

    Hi,

    Did you add the code to the very top of quick css so it runs first? Also, clear the cache a few times over.

    Best regards,
    Jordan Shannon

    October 30, 2019 at 4:58 pm #1152420
    NMDKDesign

    Hi Jordan,
    yes added the code on top and cleared the cache a few times.
    Nothing changed.

    Regards

    November 1, 2019 at 4:38 pm #1153089
    NMDKDesign

    Hi Guys,
    i´m still having this issue.
    Any further ideas?

    November 2, 2019 at 12:01 pm #1153238
    Victoria

    Hi NMDKDesign,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    November 2, 2019 at 12:10 pm #1153241
    NMDKDesign

    Hi Victoria,

    of course!

    Best regards

    November 5, 2019 at 2:26 pm #1153999
    NMDKDesign

    Hi Victoria,

    any news?

    Best regards

    November 6, 2019 at 4:41 pm #1154325
    Victoria

    Hi NMDKDesign,

    Thank you.

    Can you disable caching and minification for now?

    Best regards,
    Victoria

    November 7, 2019 at 11:45 am #1154588
    NMDKDesign

    Hi Victoria,

    of course! I deactivated both plugins (Autoptimize and W3 Total Cache).

    Best Regards

    November 10, 2019 at 10:48 pm #1155415
    Mike

    Hi,
    Sorry for the late reply, thanks for the login, first I recommend not using the built-in screen options for your situation, and I noticed that both of your sections have the same ID, so I changed this for you to reduce conflicts.
    Now the reported media queries for the iPad Pro 9.7 is 768px Portrait, and 1024px Landscape, and you want this device to see the same image both ways, so your first media query for smallest devices will go up to 1030px, to give us a little wiggle room, and then anything over 1031px will see the second image for desktops.

    @media only screen and (max-width: 1030px) { 
 #top #wrap_all #ueber-desktop {
        display:none !important; 
    }
}
@media only screen and (min-width: 1031px) { 
  #top #wrap_all #ueber-mobile  {
        display:none !important; 
    }	
}

    I have applied this for you and tested by emulating a tablet on my desktop, please clear your browser cache and check.
    Please note that my understanding is that iPads are harder to clear the cache, so please try a couple of times.

    Best regards,
    Mike

    November 15, 2019 at 12:57 am #1157023
    NMDKDesign

    Hi Mike,
    thank you so much. That worked.
    But now backend is showing me a wrong revision and frontend is showing me the right one.
    I cleaned cache several time but it did not fix the issue. Any suggestions?

    Image Backend (1/5)

    Image Frontend (1/3)

    Thanks in advance

    November 16, 2019 at 7:32 pm #1157521
    Mike

    Hi,
    Glad to hear that is working for you, as for your other element, the one with 1/5 columns is set to hide for all screens
    2019-11-16-122807
    and the one that is showing with 1/3 columns is set to show for all screens
    2019-11-16-122838
    please try adjusting to suit.

    Best regards,
    Mike

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