[Resolved] Mobile Text Stacking

[Brandon]

Hi I am trying to figure out how to fix some text alignment issues. I created this Block – Content Template element for my blog and cannot seem to figure out how to fix the header text stacking.

Here is what it looks like on desktop:

Here is what it looks like on mobile:

As you can see the text is stacked ontop of each other instead of just getting smaller and being responsive. Major problem is even if I delete the comments tab or the date, the author name is still stacked. Even if I change the font size and make it smaller its still stacked.

I am trying to just have the text format just like this website.

As you can see I am trying to emulate the style of this very much:
desktop:
mobile:

[Fernando]

Hi Brandon,

It’s stacking because there’s not enough space. One solution is to make the text wrap through custom CSS.

Another solution is to make the Headline Blocks inline width (no need to place them in a Grid): https://docs.generateblocks.com/article/headline-overview/#inline-width

One other solution is to wait for the upcoming GB 1.7 update which should allow you to inline all or most of them with no code needed.

[Brandon]

Hi there, thank you for that. Removing the grid and then making the text smaller did fix it. Thanks a lot :)!

[Fernando]

You’re welcome, Brandon!

[Author]

Posts