[Support request] Block Header css issue

Home Forums Support [Support request] Block Header css issue

Home Forums Support Block Header css issue

  • This topic has 5 replies, 3 voices, and was last updated 2 months ago by Elvin.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2018700
    Martin

    I included a screen share of the issue I’m trying to fix.
    The tablet header I’m trying to design (using GeneratePress Block Element type Hook – inside_mobile_header : element name Mobile Header licensed ) will not allow me to use all the space available.
    I am using GenerateBlocks Container / Grid and Headers:

    Grid
    Container
    H Headline
    H Headline
    Container
    H Headline

    I can’t seem to make it extend to the right so the phone number in the second grid column does not wrap?

    #2018712
    Ying
    Staff
    Customer Support

    Try add this CSS, so we set its width to the full width minus the width of the menu toggle + its padding :

    .gb-container.gb-container-ab948d2c {
        width: calc(100% - 54px);
    }

    Let me know if this helps πŸ™‚

    #2018735
    Martin

    Yes almost. The whole grid should be left justified so there is no space on left.
    https://share.getcloudapp.com/jkuEpw69

    Then there seems to be a problem with the @media css you gave me earlier between 1025 and 1035 pixels?
    https://share.getcloudapp.com/4guP8B8g

    The other blocks with hide-on-tablet or hide-on-mobile should not be visible?

    #2018811
    Elvin
    Staff
    Customer Support

    Hi Martin,

    Yes almost. The whole grid should be left justified so there is no space on left.
    https://share.getcloudapp.com/jkuEpw69

    You can delete the empty column on the left side so it doesn’t act as an extra space on the left. πŸ™‚

    Then there seems to be a problem with the @media css you gave me earlier between 1025 and 1035 pixels?
    https://share.getcloudapp.com/4guP8B8g

    It’s an issue with the layout itself. If you wish for an inline display on mobile header, you can include the contact details on the block element that is hooked in on the mobile header.

    You then remove it the Container block with the hide-on-desktop hide-on-tablet class.

    A wise man once said:
    "Have you cleared your cache?"

    #2018860
    Martin

    Sorry Elvin that wasn’t it, but I figured it out:
    1. There was no empty column to be deleted (it is a 2 column container) but I changed the container holding the grid to Full width and that solved the problem of taking up all the space

    2. the @media css I think had an error:

    @media (min-width: 1025px) and (max-width: 1035px)  {
    .gb-container.hide-on-desktop {
        display: block !important;
    }
    }

    If I change “display: block !important;” to “display: none !important;” it allows the container I want to hide when I assign it the “hide-on-desktop hide-on-tablet” classes

    I’m happy with my Block Element Hook inside_mobile_header now. Thanks.

    #2020582
    Elvin
    Staff
    Customer Support

    No problem. I believe you’ve fully sorted it out? Let us know if you need further help. πŸ™‚

    A wise man once said:
    "Have you cleared your cache?"

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