Site logo

Archived topic

Dynamic width of dynamic block depending on length of text

5 replies · Started by Peter on February 19, 2022

Viewing posts 1–6 of 6

Hi, the title of each page shows up dynamicly on my site, this works well.

https://www.peter-auf-tour.de/

However, is it possible to change width of this title block element dynamicly depending how long the title is? e.g. "Florida" needs much less space than "Alberta/Saskatchewan".

Regards,
Peter

Hi Peter,

With some CSS it's possible. You can give this CSS a try to see if this is what you want.

.gb-grid-wrapper.gb-grid-wrapper-7106166b .gb-grid-column {
    flex-basis: 20% !important;
    width: unset !important;
}
.gb-grid-wrapper.gb-grid-wrapper-7106166b .gb-grid-column p strong {
    white-space: nowrap;
    padding: 0 20px;
}

If so, we keep on working on this :)

Hi Ying,
I put this css in simple CSS, but nothing happens. Once again, to make my problem understandable: I want the white bar with the title inside to change dynamicly in width depending on text (wide bar for long words, short bar for short words)

thanks again :-)

Hi there,

remove the styling from the container block - ie. the white background, blue border and padding.
Now add those styles to the Headline Block.
Because you have the Headline Block set to Inline width it will auto size to the text within.

Thanks, David, it worked well with the title. With the "Second Title" I am still struggling, but hope to manage it myself. If not, I will come back to you.

Ok let us know how you get on

This archived topic is closed to new replies.