[Resolved] Spacing with Grid Columns

[Christa Hutchins]

Tom,
I’m using your lightweight grid columns plug-in. It looks like it is adding a lot of blank space after the columns before the next row of text. Is that something I can change?

http://www.doanewthing.com

Feel free to point out anything else stupid I am doing!

[Tom]

You can adjust the amount of spacing below the columns with this CSS:

.lgc-column {
    margin-bottom: 1.5em;
}

In your case, since you don’t have multiple rows of columns, you could do something like this:

.lgc-column {
    margin-bottom: 0;
}

Let me know if that does the trick 🙂

[Christa Hutchins]

Ok, I tried to be a big girl and figure out by myself where to put that code, but I broke everything, had to delete the whole plug in and re-install! Can you tell me specifically where to put that?

[Tom]

Ah, I’m sorry!

This should help: http://generatepress.com/knowledgebase/adding-css/

[Christa Hutchins]

I used Option 2 because I already had jetpack installed. I used the second one where you had the margin set to 0. It eliminated some of the space, but there is still more space than I wanted. I wonder if that is because I am using H1 in the next row? Maybe it has some spacing built in it?

Also, I used your option for margin-bottom=0. That means every time I use the grid, the spacing will be 0, right? I may be using a lot of columns and grids, so perhaps I need to change it to the 1.5em version?

Thanks for your help!

[Tom]

If you don’t want to take away the spacing on all columns, then you can delete that CSS you added, and use the style parameter built into the shortcode.

For example:

[ lgc_column grid="25" tablet_grid="50" mobile_grid="100" style="margin-bottom:0px;" ]Some content[/ lgc_column ]

I had to add spaces between the [ and the shortcode name for the forum, but there shouldn’t be a space.

The important part is the style="margin-bottom:0px;".

Add that to each column you want to remove the spacing from 🙂

[Christa Hutchins]

Thanks for the help. I’m pretty happy with my site right now! Not bad for a first-timer on her own!

[Tom]

It looks great! Great job! 🙂

[Rylan Urban]

Hey Tom How to I remove the spacing between columns, for just for one grid, not all of them.

I have a 33/33/33 each, with an image aligned to the center. But I would like to remove the padding between the columns so that they images touch each other.

Rylan

[Tom]

You can wrap your columns in a div with a class, then do this:

.my-wrapper-div .inside-grid-column {
    padding: 0;
}

[Rylan Urban]

Can you show me how to do that here

[Tom]

Pretty simple:

<div class="my-wrapper-div">Shortcode in here</div>

[Rylan Urban]

Yes! Perfect

Thanks!

[Tom]

You’re welcome 🙂

[Tahala]

Tom,
I love GeneratePress Premium.
This theme is the best I’ve ever used.

I installed Lightweight Grid Columns Plugin,
And using 33%x3 and 50%x2.

After this setting,I want to add some style on my grid appearance.

rounded border with solid line.

So I added this code into Child themes’s CSS,
.lgc-column {
border-radius: 15px;
border: 1px solid #73AD21;
background: #ffffff;
padding: 5px;
}

And this is fine.

But
seperating each columns

When I added “margin” to the code above.
2nd and 3rd columns is located beneath the former column.

So, Is there any solution?

[Author]

Posts