Archived topic
tab stop & white-space
9 replies · Started by Markus on March 8, 2023
Hi,
I am using GP and GB pro now for the first time for a customer project. So far I can implement everything I imagine.
Now I'm facing the following problem, about which I have unfortunately not yet found anything in the forum.
For a list I would like to integrate a formatting that looks similar to a table:
Icon > Time > Description
Screenshot: https://we.tl/t-KC5hf38bpE
The two entries (time/description) should start in the same line below each other.
I tried to add this via the child theme with a style, which I added via the field "extended" -> additional CSS classes. This does not work. Does anyone have a solution for this?
.atab {
tab-size:80;
white-space: pre;
}Thanks
Hi there,
The two entries (time/description) should start in the same line below each other.
What does below each other mean? Do you mean the description should be below the icon and time?
If so, you can add the description using another headline block.
I have put here again a short screenshot, then it might be a little clearer how I imagine the final formatting...
Please have a look: https://we.tl/t-cYtBG04DBa
Thanks
Your Grid block should have two columns in it (30/70 split maybe) - one for the years and one for the descriptions:
https://www.screencast.com/t/i7K9YV5RsIZn
Hi Leo,
thanks for your support...I think you mean something like this:
https://we.tl/t-j08FLGTzU5
That would work, but I haven't found a way to close that gap between the two columns yet.
For the grid, I set the "horizontal gap" to 0. However, it still does not slide together completely.
Any ideas?
Hello there,
To clarify, do you need to totally remove the gap or just make the border lines connect?
Can you share admin login credentials so we can take a closer look at your setup?
Please use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Hi Fernando,
it would then be good enough for the lines to connect, without any gap.
I have built it up as Leo suggested, as two containers, 25% and 75%.
Here is a short screen video about it: https://we.tl/t-WBtGAQfbRS
I am still developing locally via Mamp Pro.
Hi there,
you could do something like this:
1. Add a Container Block. And in Advanced > Additional CSS Classes add: tab-space-list
2. Inside the Container Block, add the headline block as you had it originally ie.
Just the headline with Icon > Strong text > rest of the text.
3. Add this CSS:
.tab-space-list .gb-headline-text {
display: flex;
}
.tab-space-list .gb-headline-text strong {
min-width: 10ch;
}In the last rule we set the min-width of the strong text to 10ch which is 10 characters. Adjust that to suit.
works fine, David. Thanks a lot 🙏
You're welcome
