Docs

[Vaughn D]

Hello,

I’ve got a couple issues I’m trying to fix, and I’m hoping you can help.

I’ve got sections marked as hidden on mobile (phone, portrait tablet and landscape tablet) but the large screen size is showing on a portrait iPad. Now, I know that an iPad is 1024px, and that’s the main issue here given that the threshold for the medium screen size is lower than that in X. I’ve gone through the forum and tested out some of the CSS suggestions with that to no avail. None of them seem to work. So I’m hoping you can help with that.

Another issue I’m having is with white space showing up below the final section background image. I had a ticket out about this recently, and was given the CSS: padding-bottom: 0 !important;

I thought that had worked, but I’m still getting it in some places, and the client is being quite insistent about getting rid of them. Any help on this would be appreciated.

I’ll send the site and login details in the next message as private. Thanks.

[Vaughn D]

This reply has been marked as private.

[Vaughn D]

One other question – when you hit the ‘scroll to top’ button on the bottom of the page, it slides up to the top as expected. If you begin to scroll down from there right away, it glitches out pretty bad. Any idea what might be causing that issue?

Thanks

[Friech]

Hi There,

Thanks for writing in! You can add this under Custom > CSS in the Customizer. And then add the class x-hidden-ipad on the section/row/element that you want to be hidden on iPad

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
  	.x-hidden-ipad {display: none !important;}
}

Would you mind pointing us to those white space showing up or provide us screenshot, please. I’m not seeing it on my end.

Thanks.

[Vaughn D]

Sorry, I had turned on the bottom footer to see if that helped, and it does take care of the problem – however I wouldn’t be surprised if they request I remove it. So I turned it off for now. This is like, a super-picky thing, to be honest, but they’re being pretty insistent. You really have to get your browser in a weird layout to get the white space.

Also, did you see my above question about the scroll-to-top glitchiness?

When you hit the ‘scroll to top’ button on the bottom of the page, it slides up to the top as expected. If you begin to scroll down from there right away, it glitches out pretty bad. Any idea what might be causing that issue?

I’m away from an iPad at the moment, so I’ll have to test the code you provided later on this evening.

Thanks.

[Vaughn D]

Also bad news, that code didn’t appear to work for landscape ipad.

[Rue Nel]

Hello There,

Did you add a custom class x-hidden-ipad to one of your section or the section that you want to hide in ipad devices? The code should have work if you have added it.

“When you hit the ‘scroll to top’ button on the bottom of the page, it slides up to the top as expected. If you begin to scroll down from there right away, it glitches out pretty bad. Any idea what might be causing that issue?”
What sort of glitch have you notice? Could please send us some screenshots?

I noticed that you have use autoptimize plugin. Please temporarily deactivate this or at least clear the cache and rebuild the JS and css styles in your site.

Please let us know how it goes.

[Vaughn D]

This reply has been marked as private.

[Vaughn D]

Follow-up – the code works to get hide the site on landscape ipad entirely when applied to all sections – but I need it to instead show the mobile sections that I’ve created for each page as they show on portrait and phones. So this is like, half way there I think. Hiding one thing, but it needs to show another.

[Rad]

Hi Vaughn,

From above video, I can’t replicate it. Do I need to click something? Your video doesn’t display any actions other than scrolling, but I can see that the issue is you’re trying to scroll while automated scrolling is also running.

About the other issue, how about create more classes?

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
  	.x-hidden-ipad { display: none !important; }
  	.x-visible-ipad { display: block !important; }
}

@media only screen 
  and (min-device-width: 767px) 
  and (-webkit-min-device-pixel-ratio: 1) {
  	.x-hidden-phone { display: none !important; }
        .x-visible-phone { display: block !important; }
}

@media only screen 
  and (min-device-width: 1025px) 
  and (-webkit-min-device-pixel-ratio: 1) {
  	.x-hidden-desktop { display: none !important; }
        .x-visible-desktop { display: block !important; }
}

Then use those classes accordingly.

Thanks!

[Vaughn D]

These suggestions helped. However I’ve come across a new issue.

On mobile, when tapping the menu button, the menu flashes up for just a moment and disappears. I’ve read a couple threads on here about it, but can’t seem to find the answer based on those issues from other community members.

Any ideas?

[Vaughn D]

Ok, I figured out what was causing it – it’s the following CSS code that I implemented to force a new mobile threshold to prevent early switchover on a lower-resolution desktop.

@media (max-width: 995px) {
.x-btn-navbar {
     display: block;
     float: right;
    }
    .x-nav-wrap.desktop {
        display: block;
    }
    .x-nav-wrap.mobile.in {
       display: none !important;
}
  a.x-btn-navbar.collapsed {
 display: none !important;
}

}

@media (max-width: 767px) {
    .x-btn-navbar {
     display: block;
     float: right;
    }
    .x-nav-wrap.desktop {
        display: none !important;
    }
    .x-nav-wrap.mobile.in {
        display: block;
    }
    a.x-btn-navbar.collapsed {
 display: block !important;
}     
}

Do you see anything in this that might be causing the issue with the disappearing mobile menu?

[Vaughn D]

I think I fixed it by taking out instances of the ‘!important’ in the code – do you think that will have an affect on the threshold ultimately?

[Nico]

Hi There,

Happy to hear that you have fixed it. It does not affect any threshold ultimately.

Let us know if anything happens.

Thanks.

[Author]

Posts