Archived topic
generateblocks top bar responsive text
9 replies · Started by Jose Manuel on July 16, 2021
Hi,
I created a topbar using GenerateBlocks. Until here everything is fine, im almost close to what I wanted, but im having problems with text in topbar, I almost tried every option in GB and still didn't figure out how to make text responsive.
Im using Container> Grid > 4 containers atm.
When it's full screen in desktop its fine, but if I try to resize text is merging before tablet breakpoint. Im trying to get to something like this:
https://gyazo.com/b60825535e9769cf70f013114f42139f but text merges if I place it closer.
Thank you
Jose M.
Hi there,
currently the grid items all based on %'s so they will shrink in pro with the screen width.
Are you trying to stop this from happening on certain items?
I'm trying to get the 3 headlines in topbar to stay close and equispaced like the example I gave, but when I place it together text is overlapping on resize. I tried to do it using only 1 text field, but I cant placed the icons then.
Like you said, using a grid is giving me problems because text fields have differente length and using %'s is getting me mad.
What's the best approach to get it working?
Thank you!
Hi Jose,
Have you tried to use theinline widthof the Headline block?
https://docs.generateblocks.com/article/headline-overview/#spacing
Let me know if this helps :)
Hi again,
Tried to use the inline width with no luck.
Here is how it looks when im creating the topbar block (I want it like this):
https://gyazo.com/28abf7bcf81b7910e13eec2aaf8022e7
But on the website it looks more spaced and not equispaced (red lines):
https://gyazo.com/3cf8257c03789a1ad40cf0f9871f14e5
Also when I resize text get overlapped and in 2 lines (red lines):
https://gyazo.com/c4a7fa5d3357752465e7c1dd5a88c16c
How can I solve it?
Apologyze for my bad english :(
It's because you still have the Grid wrapping the headlines.
Can you try using this structure?
https://www.screencast.com/t/VJyG4Icn0
Let me know :)
That worked pretty well for the spacing and text overlapping.
Thank you very much!
Is there any way to stop text going to 2 lines when resizing?
Thank you again for your time :)
Right now the width of the two container under Grid is set to 33.3% and 66.6%.
Change them to 15%and 85%, so that the text part can have more space.
And you can add this CSS, so that the text in the button won't wrap to 2 lines when screen shrinks:
.gb-button-wrapper a.gb-button-9a3e05c0, .gb-button-wrapper a.gb-button-9a3e05c0:visited {
white-space: pre;
}Hope this helps :)
That worked perfect!
Thank you so much.
You are welcome :)
