Controlling white space within rows between widgets

I’m no authority but read your post several times and still flumoxed, perhaps why you haven’t had much response on other site and with other post.

You say you want to eliminate padding around widgets within a row, but in your styles you have successfully done that.

Within a cell you can further control the margin, border and padding elements.

Or with CSS create the space around a frame like:

.basic-border {
border-radius: 8px 8px 8px 8px;
box-shadow: none;
padding: 10px 18px 10px 18px;
background: #fff;
}

Hope it helps, probably not.

It only looks better now because the paid support for the theme I’m using (Generate Press) offered a solution. I’ve given up on getting a response from SiteOrigin.

Thanks for your tip. I’ll apply that sort of CSS and see if I can control it more finely. Irritating, because I want close spacing and there’s still unnecessary space.

See, for example.

I want each of those rows to abut the next, not allow extra space. This is as close as I’ve been able to get them, so far. (I’m upgrading a site where this sort of thing was controlled by tables, which are not responsive — hence the change. Example of old equivalent page).

The site once upgraded will have 200-300 pages that have similar spacing, so I’m seriously motivated.

I’m not sure they will respond enthusiastically if it’s not an issue with ‘page builder’. Your issue seems to be with the code, in particular with laying out a table.

In your example, the headings have lost the red colour and the rows have lost their proper spacing. This is probably because these two things cause problems and you may not have found the solutions.

With row spacing, HTML5 doesn’t accept some styles normally used to control tables, but you can use the ‘line-height’ element.

For the headings, the table heading tag (th) is a bit problematic to work with, you have to treat it individually. For example in the CSS below note ‘th’ isn’t roped in with tr and td but is on its own line.

So I can suggest how you could make something like this table

This is the mark-up code:

‘<table class=”table-layout” style=”width: 100% ; color: #52789A”>
<tr style=”color: red”>
<th style=”width: 12%”>Tuning:</th>
<th style=”width: 3%”></th>
<th style=”width: 50%”>A E A E</th>
<th style=”width: 3%”></th>
<th style=”width: 32%”>Genre</th>
</tr>
<tr>
<td>1652</td>
<td></td>
<td>Polska 154b efter Johan Albert Ekvall</td>
<td></td>
<td>Southern Sl?ngpolska</td>
</tr>
<tr>
<td>1654</td>
<td></td>
<td>Polska efter Johan Albert Ekvall</td>
<td></td>
<td>Southern Sl?ngpolska</td>
</tr>
<tr>
<td>1672</td>
<td></td>
<td>Polska fr?n Malexander</td>
<td></td>
<td>Southern Sl?ngpolska</td>
</tr>
</table>’

This is the CSS:

‘.table-layout th,
.table-layout tr td {
border-style: hidden;
line-height: 0.8em;
text-align: left;
font-size: 12pt;
}’

I hope this solution will work for you.

Thanks very much, but I must not have explained well. I have a couple of hundred OLD pages laid out in tables (however poorly) that I am migrating to a PageBuilder widget-style layout. I am not creating tables in PageBuilder, and the only ones left on the new site are temporary, pending conversion-in-place.

The example I gave is even simpler: https://bluerose.karenlmyers.org/wp/instructions/special-tunings/

That’s not a table, but a PageBuilder layout (each row with three widgets). I would like it to look more like a table, from a spacing perspective, when the browser is large enough to allow the row’s widgets to line up horizontally.

The old version of that page really is a table, but there will be no tables after all pages are converted, so improving my table layouts (cobbled together 10 years ago) is not what I’m after. I want to control the white space between widgets/rows and between rows to make the horizontal list more closely spaced vertically.

For an uglier situation, see new vs old. I have a couple hundred pages just like this, but until I can figure out how to make the NEW one look tighter, I can’t proceed, using it as a model.

Here’s my page builder row with three widgets: here

I’ve made the first row for the titles and three other rows for entries: here

And here is where I have placed a class called row-spacing.

This image shows what it looks like before and after the class is applied. here

The CSS for this is:

‘
.row-spacing {
margin-top: -10px;
margin-bottom: -10px;
}
‘

This is all you need to control the horizontal spacing. For the vertical spacing between widgets on the same row, you could place some CSS in the following location: here

You’re a prince and a gentleman — thank you very much.

I implemented your example for three rows of that page and only the top row moved up slightly. So I looked for the only difference between your setup and mine — the choice of widget. You’re using TEXT and I’m using VISUAL EDITOR.

Turns out that seems to be significant. See the difference for the top block of 3-4 rows vs the next block of 3-4 rows: identical setup, except that the top block uses the TEXT widget, and the next block uses the VISUAL EDITOR widget.

For the sample page you worked on, it doesn’t matter which of those widgets I use (I need Visual Editor almost everywhere else).

For the instance where I have a couple of hundred pages (lists of tunes by category) I use an identical LAYOUT BUILDER widget for each tune, to keep the format rigid.. That contains three row components: Tune Title, Tune Incipits (images), Tune Extras (Links and Text).

If I apply your row-spacing technique just within the three rows of the LAYOUT BUILDER (with a special exception for the top row of the page), then I do successfully achieve a much more compact layout and can tinker with it further from there.

Before

After

Mission accomplished and, again, thank you very much!

It’s good to hear that it’s sorted now.

I don’t even have visual editor installed. I don’t know why they are needed for images and media files either when the whole lot can be easily placed in a text box.

All I use are text widgets like here

The layout builder is a new widget for page builder but I do use it sometimes when there is no other way to do the layout.

I can see why you are using layout builder, to group three rows together for each track. But the problem is that when you get hundreds of these rows it will be hard to identify them because they all look the same.

Glad to help, good luck with your music site.

You’re right about Layout Builder identities, but I break the tunes up to circa 12/page, and these pages are non-volatile, so it’s not so bad. I do wish PB would allow the text of the first row/widget in the Layout Builder to bleed up to the top to distinguish each usage.

Part of the issue between the TEXT and VISUAL EDITOR widgets may also have been whether or not the “automatic paragraphs” tick was enabled. However, there are certainly difference in how they handle cellphone-sized screens.

If you want the text to cluster tightly in cellphone mode, as in the one-page example, then you have to use TEXT, not VISUAL EDITOR. For those instances, I must re-enable the “auto paragraph” for the final widget in the row, or the blocks (rows) will overlap in cellphone size (due to the negative spacing). (That means the full-screen layout is still a bit loose, to make the cellphone layout good.)

If VISUAL EDITOR instead of TEXT, no extra paragraph needed, but then each widget within the row splays apart in cellphone mode. So — different treatments.

For the high-volume tune pages, the looser spacing of VISUAL EDITOR in cellphone mode is agreeable, once I could tighten it up reasonably like this for the full-size pages.

I rely on the HTML a lot. I simply enclose text paragraphs in a <p> element and I get no format issues at all.

True, sometimes when I have pasted a long text document I do cheat and use the automatic paragraphs, but there are a few bugs I have come across, for example what you said about the end of a piece of text, sometimes it mis-behaves.

The same is true at the start a text module if you use say a heading <h4> followed by a <p> block:

<div>
<h4></h4>
<p></p>
</div>

Sometimes a class applied in the div to handle the text may not work on that first <p>, so you have to put a line break in the code like this:

<div>
<h4></h4>

<p></p>
</div>

However, you can just tick automatic paragraphs and it will do the trick as well.

Usually for me the HTML in a text widget is very reliable.