[Resolved] Header not responsive on tablet sized screens

[Matthew]

On every site I’ve ever built using GeneratePress Premium, the header (whether two or three columns) never shows right on mobile devices (tablets) that have medium screen sizes. I’ve tried using the GP Hooks approach to building headers, I’ve tried the widgets approach, and – most recently – I’ve tried using the Beaver Builder Heaver Footer plugin. It doesn’t matter HOW I create custom headers, they never look right on tablets. I’ve read multiple support forum posts about this and tried each of the suggestions given, but I’ve never been able to fix it and I need help.

You can see and recreate what I’m talking about by loading the site (URL listed in “admin only” field below) into the tool at http://responsivedesignchecker.com and selecting any of the tablet screen options with dimensions of 768 w or smaller.

It’s putting each of the columns on a separate row and stacking them diagonally and it looks terrible.

I would strongly prefer to use the Beaver Builder Header Footer plugin approach to building my headers and footers because doing so allows me to tap into the endless possibilities and granular control made possible by the Beaver Builder technology.

Please help.

[Tom]

The issue here is each section has a different text alignment on desktop.

Does beaver builder allow you to alter the text-align on mobile?

If not, we can use CSS, especially if each section has a custom class.

Let me know 🙂

[Matthew]

I don’t think so, no. It definitely supports the use of and reference to custom CSS classes, however, so we probably need to take that approach.

[Tom]

Can you go ahead and add a class to each section? Then let me know the class and I’ll write up the CSS 🙂

[Matthew]

Thanks Tom! I’m using the class named responsive-header-content.

[Tom]

Give this CSS a shot:

@media (max-width: 768px) {
    .responsive-header-content,
    .responsive-header-content .fl-icon-group-right {
        text-align: center;
    }
}

[Matthew]

That fixed it, and works great. Thank you Tom!!

[Tom]

Awesome! You’re welcome 🙂

[Author]

Posts