[Resolved] Header not responsive on tablet sized screens

Home Forums Support [Resolved] Header not responsive on tablet sized screens

Home Forums Support Header not responsive on tablet sized screens

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #536728
    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.

    GeneratePress 2.0.2
    #536789
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #540068
    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.

    #540507
    Tom
    Lead Developer
    Lead Developer

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

    #541166
    Matthew

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

    #541521
    Tom
    Lead Developer
    Lead Developer

    Give this CSS a shot:

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

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

    #542223
    Tom
    Lead Developer
    Lead Developer

    Awesome! You’re welcome πŸ™‚

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.