Mobile header height

[Gabriela]

Hi,
I’m working on a child theme from GeneratePress. I have written some CSS for parameters I could’t change in Customizer. But there’s some I can’t control.

Please look at this page https://danielaschneider.com.br/portfolio/artur-alvim/ in tablet and mobile versions.
I can’t realize why the header height remains so tall. I see at inspector that there’s a mobile-menu in html that should’t be there, since in mobile versions I am using off-canvas overlay menu.
Also in tablet version, there is a header height too tall (with mobile-menu selectors in html) and also the left sidebar (which in desktop view contains the menu), and also inspecting there I find the site-navigation selectors. Those to areas with menu selectors shouldn’t be there.

In Customizer, many controls don’t respond, in tablet and mobile modes, like padding, margin, and many others.

[David]

Hi there,

do you have an mockup image of what you’re trying to achieve for the different device sizes ? It will help us understand what the best way forward is.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Gabriela]

Hi David,
The central drawback is that I cannot control the mobile and tablet header height, and the presence of the left sidebar!

Look at the snapshots I’m attaching here (please pay attention to file names):
• https://kilate.pro/_transfs/DanielaSchneider/breakpoint-setting/1-Artur_Alvim_-_Daniela_Schneider_desired-tablet-layout.png
• https://kilate.pro/_transfs/DanielaSchneider/breakpoint-setting/1-Artur_Alvim_-_Daniela_Schneider_tablet.png
• https://kilate.pro/_transfs/DanielaSchneider/breakpoint-setting/2-Portfolio_-_Daniela_Schneider_desired-mobile-layout.png
• https://kilate.pro/_transfs/DanielaSchneider/breakpoint-setting/2-Portfolio_-_Daniela_Schneider_mobile-header-too-tall.png
• https://kilate.pro/_transfs/DanielaSchneider/breakpoint-setting/3-Artur_Alvim_-_Daniela_Schneider_desired-mobile-layout.png
• https://kilate.pro/_transfs/DanielaSchneider/breakpoint-setting/3-Artur_Alvim_-_Daniela_Schneider_mobile-anotated.png
• https://kilate.pro/_transfs/DanielaSchneider/breakpoint-setting/3-Artur_Alvim_-_Daniela_Schneider_mobile-header-too-tall.png
• https://kilate.pro/_transfs/DanielaSchneider/breakpoint-setting/4-Artur_Alvim_-_Daniela_Schneider_mixed-breakpoints.png

I guess I have too many breakpoint controls to manage… (Customizer, GenerateBlock container, SmartSlider, media, and maybe others).

[Tom]

Hi there,

Your screenshots don’t seem to be working.

However, you have this custom CSS added to your site:

.main-navigation .main-nav {
    margin-top: 8em;
    padding: 0 64px;
    width: 320px;
}

That’s why it’s so tall on mobile.

Try replacing it with this:

@media (min-width: 1024px) {
    .main-navigation .main-nav {
        margin-top: 8em;
        padding: 0 64px;
        width: 320px;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Gabriela]

Hi Tom,
Great! That solved the problem of header too tall.

Sorry for the links not working. I have fixed them below. Can you please help me about the presence of left sidebar in tablet version (when hamburger is already displaying)?

In Customizer you can define mobile menu breakpoint, but where do I define tablet breakpoint? In Customizer, many settings for tablet don’t work, don’t make difference, or you can’t set – is it so or am I missing something?

In GenerateBlock container block you can define Desktop, Tablet and Mobile. How do I set tablet layout breakpoint globally, so that I can view the settings I made in GenerateBlocks container block?

Please look at the snapshots I’m attaching here (please pay attention to file names):
• https://kilate.pro/_transfs/DanielaSchneider/breakpoint-setting/1-Artur_Alvim_-_Daniela_Schneider_desired-tablet-layout.png
• https://kilate.pro/_transfs/DanielaSchneider/breakpoint-setting/1-Artur_Alvim_-_Daniela_Schneider_tablet.png
• https://kilate.pro/_transfs/DanielaSchneider/breakpoint-setting/4-Artur_Alvim_-_Daniela_Schneider_mixed-breakpoints.png

[Tom]

To ditch the left sidebar as a specific breakpoint, you’d need to do this:

@media (max-width: 1280px) {
    .site-content .content-area {
        width: 100%;
    }

    .is-left-sidebar {
        display: none;
    }
}

You just need to match that breakpoint with the mobile menu breakpoint value.

Let me know if that does it or not 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Gabriela]

Hi!
Perfect! Thank you!

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts