[Support request] Block Header css issue

[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?

[Ying]

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 🙂

[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?

[Elvin]

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.

[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.

[Elvin]

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

[Author]

Posts