-
Hi,
I have a headline block which sometimes is divided on two rows. The headline is dynamic and shows the post category using the list of terms function. The headline has a 1px border.
When there is a long category name, and especially on mobile, the headline is split to two rows (which I want) but the block and border becomes full width instead of having the width of the text. I think you’ll understand the issue from the image. I’ve tried all settings I can think of, and I’ve also spent over 2 hours with claude.
Any input on this would be appreciated! Thanks.
image: https://postimg.cc/KkTQ46x2
-
Hi there,
To make the border wrap the text instead of stretching full width, select your Headline block, then in the right sidebar go to Layout → Display and change it from Block to Inline-block. (Screenshot)
This will force the border to hug the text even when it wraps onto two rows.
-
Thanks Chaz!
Changing the headline to inline block does not help unfortunately. Any idea if I could have done something to hinder it? I read somewhere that grids can force full width. I have attached an image of the list view.
-
Hi there,
Try wrapping the headline block in a container, then apply the border style and set the container’s display property to inline-block instead.
-
Awesome, thank you very much Alvind!
-
Sorry, I thought it worked but I still get this:
screenshot: https://postimg.cc/ZBb3QGBX
The black border is the container that holds the headline block. Both of them are set to inline-block. I tried the other display settings for the container as well.
-
Hi there,
Could you please share the page URL so we can take a closer look?
-
Do you see it if I put it in the private information field?
-
Hi there,
Could you please remove the additional Container that Alvind suggested, as that should not be required and is adding an extra border? Once removed, we can review
-
-
Hi there,
thats actually not possible with just HTML and CSS and maintain responsive behaviour.
But you can do something similar where the border wraps each line of text, usingbox-decoration-break: clone;.See the example here:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break
To add that property does require some custom CSS as its not in GenerteBlocks.
So try this:
1. select the Headline block with the term list
2. remove the padding and borders
3. give it a CSS Class of:decoration
4. Add this CSS to your site..decoration .post-term-item a { line-height: 2; padding-inline: 4px; border: 1px solid; -webkit-box-decoration-break: clone; box-decoration-break: clone; } -
Thank you David, appreciate it!
-
You’re welcome
- You must be logged in to reply to this topic.