Spacing Issue with Grid Columns

[Hillary]

I’ve put together some custom CSS to create some small ‘feature boxes’. I added them using the Lightweight Grid Columns, which I’ve used elsewhere and are working great. However, something seems to be tripping it up because the spacing is doing something weird. I’d like to have them centered on the page, with roughly 20px between them. It’s putting only two on one line, and pushing the next to the bottom.

At first I figured this must relate to the max-width I put on the div/image (275px), but with the container at 1100 it shouldn’t be an issue. I fiddled with removing the padding to see if that somehow it was related to a padding/margin issue. I tried pulling out elements to isolate what is causing it. I’ve tried a million things and can’t figure out what’s causing this.

You’ll see what’s happening on the bottom module on the the page here: http://hillarybassettross.com/new-home/

And here’s the CSS for the container:

#content-container {
	background-color: ##fff;
	max-width: 275px;
	-moz-box-shadow:    0px 0px 8px #826554;
	-webkit-box-shadow: 0px 0px 8px #826554;
	box-shadow:         0px 0px 8px #826554;
}

I’d appreciate your help!

[Tom]

I would remove the max-width.

Then, put a wrapper around the shortcode:

<div class="my-columns">
    shortcodes in here
</div>

Then give your wrapper a width and center it:

.my-columns {
    max-width: 800px;
    margin: 0 auto;
}

Also, currently there’s only two to a row as you have it set to grid-50.

If you want three columns, use grid-33.

Hope this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Hillary]

Thank you so much!!!

[Tom]

You’re welcome! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts