Site logo

Archived topic

Spacing with Grid Columns

23 replies · Started by Christa Hutchins on July 10, 2015

Viewing posts 1–15 of 24

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!

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 :)

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?

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!

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 :)

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

It looks great! Great job! :)

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

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

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

Can you show me how to do that here

Pretty simple:

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

Yes! Perfect

Thanks!

You're welcome :)

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?

This archived topic is closed to new replies.