Need to Reduce Gutter Spacing on a single widget basis, specific to one space between two widgets on one side of a multi-column row – not the combined “row” as a whole.
My website is:
http://challengeassumptions.com/
I would like to get the Yellow parts to fit together, on this page (as an example of several others I have in mind). When I say the yellow parts, I am talking about two Widgets (boxes), from within the editor, that exists in a particular column layout, as part of an overall row. These two combined boxes look to the layman like myself as though they are content widgets for a “Box”, which I will call a “Layout Box.” So if you can imagine a scenario as such, A “row” in Vantage Premium has two columns. On one side, I have placed three widgets in the “Layout Box” and on the other side I have placed two widgets in the “layout box”, all which fit within a row, which to the layman such as myself appears to be a “Row Box.”
So to be clear, my goal is to be able to get one or more “Widget Boxes” to connect together within their “Layout Box” as if they are one box. In the case of the “Yellow Parts” I mean two “Widget Boxes” within one “Layout Box” which I have assigned a yellow-colored background to. If I am successful, then the two yellow parts (widgets) will be right next to each other and create one yellow box. To be very successful, I need to somehow get one widget (box) – the top of the two to keep its rounded corners on the top, and to ignore it’s corners on the bottom. Then I need the bottom widget to ignore it’s corners on it’s top and keep them on it’s bottom. The results would be one combined (appearing) yellow box with rounded corners on all four of it’s (apparent) corners.
I first played with padding, which is apparently specific to spacing within the “widget box” before the text or object starts.
But to move the boxes (imaginary perhaps) of content closer together, I have tried both page builder, custom css (and possibly other settings) to eliminate the distance between boxes.
I have tried editing the row setting for Bottom Gutter (row spacing) within the edit of the “Row,” which again I am calling the “Row Box.” But I need to be able to set up the specific widget to have no gutter spacing added.
Hi Greg
Thanks for reaching out. There isn’t any easy way of doing this from within settings at the moment, hopefully soon. For the moment I’ve worked up a solution for you to try.
1. Edit a test row, click Attributes on the right and insert the following as a CSS Row Class, class being the important word, not ID:
2. Go to AppearanceCustom CSS and insert the following:
.no-padding-parent .panel-grid-cell:nth-of-type(n+2) { padding-right: 0 !important; padding-left: 0 !important; }What this says is remove the gutter (right and left padding) from all columns in the row except for the first one. This makes it perfect for a row with three columns where you want the last two to lose their gutter. We could create multiple instances of this rule using different class names doing different things. For example, you might say:
.no-padding-3 .panel-grid-cell:nth-of-type(3) { padding-right: 0 !important; padding-left: 0 !important; }Assuming you had inserted no-padding-3 as your row CSS class, the above rule would remove the gutter from the third column in the row.
Ref: https://css-tricks.com/useful-nth-child-recipies/