Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1009130

    Hello. I’m seeing the following when using Chrome inspect, which is how I want it to look. Here is how I see it on my actual phone.

    The Fullscreen slider background does not look the same on mobile devices when compared to what Chrome inspect shows and this applies to any media query that’s iPad landscape and below.

    Also, at 768px and below, the Fullscreen Slider button stops working.

    I currently have ALL caching cleared and disabled. I’ve tried Chrome and Safari.

    Thank you,
    Ryan

    #1009362

    Hey WP Turned,
    I have taken a look at your page and found that the reason your slider button is not working below 768px is because you have it pointing to the ID “#why-we-are-different” and you have the ID twice on the same page. So it points to the first of the two, and below 768px the first one is hidden. To correct this try creating a second button, so each have a unique ID, and then hide the button & element based on screen size. Or you could try using some JS to change the ID the botton points to based on screen size.

    As for how your background looks on your iPhone, are you saying that the error shows on both Chrome and Safari on your iPhone?
    I only have a Android, and the error doesn’t occur on Chrome or Firefox on the Android, Please see the screenshot in Private Content area. This seems to be a known iOS issue, please see this article for a solution: [Solved] Full Page Backgrounds on iOS (background-size: cover)
    Otherwise I will ask the team to look at your issue with a iPhone to assist.

    Best regards,
    Mike

    • This reply was modified 6 years, 3 months ago by Mike. Reason: found a possible solution on CSS Tricks
    #1009453

    Thanks, Mike. Good to go on the button issue. As for the iPhone issue, I’ll wait to hear from the team. I did look at your link.

    I’m not sure where the issue lies (Chrome Inspector, Enfold, iPhone, etc.), but it’s frustrating that views are different. See the example below.

    This is how the home page looks in Chrom Inspector (iPhone 7 landscape).
    This is how that same page looks on the Chrome browser (iPhone 7 landscape).
    This is how that same page looks on the Safari browser (iPhone 7 landscape).

    I’m not looking for perfection here, as I know how difficult this stuff is. However, a client will never accept elements bleeding into their headers.

    #1010152

    Hi WP Turned Up,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (min-device-width : 768px) and (orientation : landscape) {
      .slideshow_align_caption {
        padding-top: 40px;
      }
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1010397

    Thank you, but the issue is still there.

    #1010459

    Hi WP Turned Up,

    Can you try this code and check if it helps:

    @media only screen and (min-width:480px) and (max-width:768px) {
      .home #fullscreen_slider_2 .slideshow_align_caption {
        vertical-align: bottom;
        padding-bottom: 25px;
      }
    }

    Best regards,
    Nikko

    #1010478

    Good enough, thank you!

    #1010549

    Hi,

    Glad we could help :-)

    Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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