How to squish rows together?
-
Hi, I want to squish my rows (visual editor widget) so they’re not spaced apart and frankly, ugly. They take up to much space and look messy. How can I move these close, not touching, but closer.
Look for the rows below “What code hugs can do for you” on the home page.
Thanks for your speedy response! 🙂
-
If those can’t be configured via panel, use this code in Custom CSS option.
#pl-7 #pg-7-3 { margin-bottom: 50px; } #pg-7-3 .panel-grid-cell .so-panel.widget { margin-bottom: 0; } #pg-7-3 .panel-grid-cell .so-panel.widget h2 { margin: 0; } #pg-7-3 .panel-grid-cell .so-panel.widget p { padding-bottom: 0; } #pg-7-3 .panel-grid-cell .so-panel.widget p:last-child { padding-bottom: 20px; }I guess this wasn’t clear, but how do I squish them bottom up? So, the top of the individual rows are closer to the bottom of the rows above. @paulwpxp
how do I squish them bottom up? So, the top of the individual rows are closer to the bottom of the rows above.
We can do that by reduce (or set to zero) bottom padding of the last paragraph in each item and also reduce/set to zero the top margin of the h2 element.
Did you try the code? It does just that (at the time that I posted the code.)
I did try, but it only squishes them together side to side. Where/what is the h2 element?
Actually that code does nothing to the horizontal space, only vertical space.
h2 element is text wrapped in <h2> which is a HTML tag for the title used in each item in that section.
I see, I’ll try the code again.
Everything is at zero and the code is set, still looks the same. (This is actually the page builder widget not visual editor!)
Is the code still there or removed? I couldn’t see the code via inspection. I just test the code again via Firebug tool and it worked as before.
Please make sure you put in the code via Custom CSS option if theme provided or use a Custom CSS plugin so that the code is loaded after everything. Also try open 2 browser tabs, one for the before and one for the after, it helps differentiate the changes when switch back and forth and compare.
Hi, I did what you said and they are still being squished side-to-side, see for yourself.
I added the code again but it was removed beforehand. I did the two browser thing and as I claimed before, the margin between two (side-to-side) is closer, not the margin between the top and bottom.
Actually that code does nothing to the horizontal space, only vertical space.
You can actually read it in the code.
Maybe it’s the optical illusion when things move closer one way affects the overall look. But the code does nothing to the side spacing.
The topic ‘How to squish rows together?’ is closed to new replies.