Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 13, 2018 at 1:01 am #1009130
    WP Turned UP

    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

    September 13, 2018 at 12:46 pm #1009362
    Mike

    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, 2 months ago by Mike. Reason: found a possible solution on CSS Tricks
    September 13, 2018 at 3:45 pm #1009453
    WP Turned UP

    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.

    September 15, 2018 at 3:35 pm #1010152
    Victoria

    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

    September 16, 2018 at 1:50 pm #1010397
    WP Turned UP

    Thank you, but the issue is still there.

    September 16, 2018 at 5:19 pm #1010459
    Nikko

    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

    September 16, 2018 at 6:09 pm #1010478
    WP Turned UP

    Good enough, thank you!

    September 17, 2018 at 5:14 am #1010549
    Rikard

    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

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