[Resolved] Hide Combined Header on Mobile

[J. Andrew Scott]

Is there a way to either hide the combined header on mobile or force the header image to retain its original aspect ratio on mobile? (Mobile header enabled.)

[J. Andrew Scott]

I was able to hide the image by reducing the combined header height:

@media (max-width: 768px) {
.generate-combined-page-header {
height: 75px !important;
}
}

Don’t know if there is a better way to do this.

[Leo]

Hi there,

Any chance you can link me to the page?

It would help to come up with the best solution for your case 🙂

Thanks!

[J. Andrew Scott]

http://figarigroup.com

[Tom]

First, I would disable the “Automatically add paragraphs” option in the Page Header settings.

Then add this:

@media (max-width: 768px) {
    .page-header-content-container {
        padding: 0;
    }
    
    .generate-combined-header {
        position: relative;
    }

    .generate-content-header {
        background-image: none;
    }
}

[J. Andrew Scott]

That did the trick, thanks!

[Tom]

You’re welcome 🙂

[Author]

Posts