white space under mobile menu
-
Hi All,
I know is a supper topic but I have read everything and added all this code but didnt work: Could you have any idea of what it happens?
.menu-bar {
overflow: hidden;
}
body:not(.ct-primary-spacing) .content-area {
padding-top: 0px;
padding-bottom: 0px;
}
.page-id-15 .entry-content > *:first-child { margin-top: 0px !important}
.storefront-breadcrumb {
margin-bottom: 1em;
}The page I need help with: [log in to see the link]
-
Hi @creativa1976! It looks like this white space is a combination of several margins and padded elements. I’d recommend using Chrome or Firefox to simulate what the site would look like on a mobile device, and then use the DOM inspector to look at the different elements on the page, and see which ones are causing the issue. You can also test CSS using the developer tools to preview your CSS changes.
The elements I found are:
– The
news-list-sidebarclass is adding a 60px top margin.
– Theshop-page-main-blockclass is adding 60px of top padding.
– Thenav-bar-threeclass is adding 35px of bottom padding to the header content.Note that you’ll probably want to use a media query to only tweak/remove these spacing properties on mobile, so the CSS could get a little more complicated.
The topic ‘white space under mobile menu’ is closed to new replies.
