[Resolved] Spacing Issue with Grid Columns

Home Forums Support Spacing Issue with Grid Columns

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #250762

    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!

    Lead Developer
    Lead Developer

    I would remove the max-width.

    Then, put a wrapper around the shortcode:

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

    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 πŸ™‚


    Thank you so much!!!

    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.