- This topic has 9 replies, 2 voices, and was last updated 8 years, 5 months ago by
.
Hi,
I have placed 2 quarter elements below a half element to “split up” the list of features into two columns. However, when I do this it creates a very large gap between the 2 quarter elements and the half element above it.
Is there some custom CSS code I can use to reduce this?
Thanks
Hi @LeaV,
I hope you are well today and thank you for your question.
You can reduce it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
@media (min-width: 1251px) { .sh-section-e6a2a30d24158618572e19cc8dc77ac9 .fw-row:nth-child(2) .sh-column:first-child { position: absolute; top: -91px; left: 0; } .sh-section-e6a2a30d24158618572e19cc8dc77ac9 .fw-row:nth-child(2) .sh-column:last-child { position: absolute; top: -91px; left: 200px; } }Best regards,
Shufflehound teamHi,
Thanks for this, but I’ve added the code and there’s still no change. I’ve added other Quick CSS code which has taken immediate effect so I don’t think it’s a matter of waiting a bit.
Solution for this topic
It seems the section id is getting changed on your site so above shared CSS code is not working.
Please try using below custom CSS code instead of above.
@media (min-width: 1251px) { #content .fw-page-builder-content > .sh-section:first-child .fw-row:nth-child(2) .sh-column:first-child { position: absolute; top: -91px; left: 0; } #content .fw-page-builder-content > .sh-section:first-child .fw-row:nth-child(2) .sh-column:last-child { position: absolute; top: -91px; left: 300px; } }Much better, except one of the list points isn’t appearing on it’s own line – it starts immediately after the previous one. I’ve noticed this tends to happen a lot with list points on other pages, too.
There’s also another page I want to do something similar with – I’ve placed the link in the private section below.
Solution for this topic
Much better, except one of the list points isn’t appearing on it’s own line – it starts immediately after the previous one. I’ve noticed this tends to happen a lot with list points on other pages, too.
Use below custom CSS code to resolve this issue.
li.sh-list-item { display: inline-flex; width: 100%; }There’s also another page I want to do something similar with – I’ve placed the link in the private section below.
Actually to do it correctly, you should move the list item contents in to the column above it as shown in the attached screenshot.
Hi – thanks. For the second issue, I presume that would then turn it into a single column list. I was hoping for two columns. I presume there’s now to place two 1/3 elements into one 2/3 element? If not it’s okay, I’ll figure something else out.
In Unyson visual builder you can not add one column in to another so yes you have to figure out something else.
Ok thanks
You are most welcome here 🙂
