Tagged: responsive, tablet
Hello-
I noticed yesterday that my site, which used to look great on tablets, seems to have having an issue from approximately 627 pixels to 989 pixels, where the top of the pages is cut off. This is on multiple browsers (Firefox and Chrome) in developer mode as well as on an iPad.
I have created a staging site (credentials in private contact) and am hoping that (a) you can see the issue and (b) tell me what’s causing it.
A good page to see it is:
But all pages on the site experience that same issue at those pixel breaks.
Thanks!
Rob
Hey Rob,
Hope you are doing well!
Top padding is set to 0 (in /css/layout.css file) on mobile devices but since you are using fixed header on mobile, that needed to be increased and to override the code in layout.css file, I added following code to bottom of Style.css file of your child theme
@media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive.html_mobile_menu_tablet.html_header_top #top #main {
padding-top: 225px !important;
}
}
@media only screen and (max-width: 767px) {
.responsive.html_mobile_menu_tablet.html_header_top #top #main {
padding-top: 200px !important;
}
}
Could you please review your website? :)
Best regards,
Yigit
Hi Yigit, nice to see you again and happy new year! Thank you for the above!
It looks like it’s fixed! Thank you so much. Can you please leave this ticket open for a couple days so I can see how it does when I push it back to production environment?
Best,
Rob