[Resolved] Disable Header on mobile

[Karel]

I’m sorry again for all that misunderstanding … to make it all clear i will share a pic of what i want to do.

https://imgur.com/a/zrF4WTv

[Leo]

Can you add the code here and I’ll try to tweak it so it’s more like the screenshot above?
https://generatepress.com/forums/topic/disable-header-on-mobile/#post-875196

[Karel]

Okey I´ve uploaded this

@media (max-width: 768px) {
.single .page-hero {
background-image: none;
}
}

[Leo]

I see that you are using CSS to set the page hero height:

@media (max-width: 768px) {
    .page-hero {
        min-height: 730px;
        max-height: 800px;
    }
}
.page-hero {
    height: 675px;
    box-sizing: border-box;
}

Can you try using the built-in padding options? It also has mobile options and will work better:
https://docs.generatepress.com/article/header-element-overview/#padding

Then we should only need to align the content to the left.

Let me know 🙂

[Karel]

Okey I have deleted them, played with padding little bit + added

@media(max-width: 768px){
.single .inside-page-hero {position:absolute;top:17vh}}

Anyway:
Grey Background around heading+meta
The text needs to be aligned to the left
And I would like to have identical space around Heading, it should not matter how many words the heading have.

Thank you for any advice and help Leo 🙂

[Leo]

Looks like you have this CSS added as well?

@media (max-width: 768px)
.single .inside-page-hero {
    top: 17vh;
    display: block;
}
@media (max-width: 768px)
.inside-page-hero {
    position: fixed;
    left: 0;
    top: 30vh;
    height: 400px;
    min-width: 100%;
    max-width: 70%;
    display: block;
}

Can you remove that?

[Karel]

Both deleted.

[Leo]

You also have this CSS which is causing the issue:

.inside-page-hero {
    position: fixed;
    left: 0px;
    top: 280px;
    height: 400px;
    min-width: 100%;
    max-width: 70%;
    display: block;
    box-sizing: border-box;
}

Can you basically delete all the CSS related to the page hero for now? Almost all of the thing can be accomplish with the built-in options.

[Karel]

Done, I had those styles to keep H1 fixed and fading with opacity ( I wanted that for Main page & posts in desktop mode ).

[Leo]

Those CSS makes it really hard to tweak things.

Do you want to adjust the padding so it looks like what you want? I don’t think 50% padding works:
https://www.screencast.com/t/X7UzWjviuZOp

You would also just the full-screen option as well.

[Karel]

Okey padding-bottom is now 0 , full-screen is set.

[Leo]

Getting closer 🙂

Now add some top and bottom padding with mobile toggle on:
https://docs.generatepress.com/article/header-element-overview/#page-hero

Then try the adjusted CSS here:

@media (max-width: 768px) {
    .single .page-hero {
        background-image: none;
        background-color: #000000;
        min-height: unset;
        text-align: left;
    }
}

[Karel]

Okey mobile padding-top: 5% , bottom: 0.

[Leo]

Ok so looks like we are basically there?

Just add text-align: left; to this CSS you already have:

@media (max-width: 768px) {
    .hero-headline {
        font-size: 40px;
        display: block;
        font-family: Josefin Sans;
        font-weight: 600;
        line-height: 40px;
        color: #ffffff;
        min-width: 100%;
        box-sizing: border-box;
    }
}

[Karel]

Yeah almost,

I have put it like this

@media (max-width: 768px) {
.single .hero-headline {
font-size: 40px;
display: block;
font-family: Josefin Sans;
font-weight: 600;
line-height: 40px;
color: #ffffff;
min-width: 100%;
box-sizing: border-box;
text-align:left
}
}

Because without .single it is affecting my front page but i would like to keep front page as full screen.

[Author]

Posts