- This topic has 9 replies, 5 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
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
Customer Support
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-cYtBG04DBaThanks
Customer Support
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/i7K9YV5RsIZnHi Leo,
thanks for your support…I think you mean something like this:
https://we.tl/t-j08FLGTzU5That 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?
Customer Support
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.Customer Support
Hi there,
you could do something like this:
1. Add a Container Block. And in Advanced > Additional CSS Classes add:
tab-space-list2. 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-widthof the strong text to10chwhich is 10 characters. Adjust that to suit.works fine, David. Thanks a lot 🙏
You’re welcome
- You must be logged in to reply to this topic.
