H! bottom border inline not being respected by Toolset heading

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Karachi (GMT+05:00)

Tagged: Toolset Blocks

This topic contains 1 reply, has 2 voices.

Last updated by Waqar 1 year, 4 months ago.

Assisted by: Waqar.

Author

Posts

July 7, 2023 at 5:56 pm #2622071

jww

Screenshot 2023-07-07 at 10.55.04 AM.png

I have this for my H1 custom css
h1 {
display: inline!important;
border-bottom: 3px solid #34e5eb;
}
And on the entire site it looks fine, where the bottom border only extends as long as the title is. Perfect.
But when I add a Heading block to a grid cell in Toolset, that bottom border goes the width of the cell rather than stop at the length of the title, so it seems it is not respecting the inline css part.

It looks like the H1 class is tb-heading but when I add that to custom css it still doesn't respect the inline css.

How do I make it respect inline for the bottom border as per my H1 css for the entire site?
Thanks in advance.

July 10, 2023 at 6:58 am #2622587

Waqar

Hi,

Thank you for contacting us and I'd be happy to assist.

Your observation is correct and by default, any element that is directly placed in the grid cell is assigned the full 100% width.

To make an exception for the h1 tag, so that it only takes up its natural width, you can include the following custom CSS code:


.tb-grid-column>h1 {
width: auto !important;
}

I hope this helps and please let me know if you need further assistance.

regards,
Waqar