white space under mobile menu

  • Resolved creativa1976

    (@creativa1976)


    4 years, 8 months ago

    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;
    }

    https://ibb.co/zZKts4G

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • 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-sidebar class is adding a 60px top margin.
    – The shop-page-main-block class is adding 60px of top padding.
    – The nav-bar-three class 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.

    • This reply was modified 4 years, 8 months ago by Austin M - a11n. Reason: typo
    Thread Starter creativa1976

    (@creativa1976)

    Oh my good! Your where totally right!!
    You have saved me!
    Thanks!

    You’re very welcome! Glad I could help! ??

    We haven’t heard back from you in a while, so I’m going to mark this as resolved. Feel free to start a new thread if you have any further questions!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘white space under mobile menu’ is closed to new replies.

Tags