Grow your CSS skills. Land your dream job.

grid problem with images.

  • Abz
    # June 25, 2013 at 8:09 pm

    Hey,

    I’ve using the grid that Chris wrote about on this site.

    its working fine but with one problem. I have 4 columns with a div element and with an image.

    all columns have a padding right except the last one.

    If you look at http://codepen.io/anon/pen/mtgAI

    the right div is bigger.

    the last column is now bigger. Any ways to get around this?

    Thank you :)

    # June 25, 2013 at 8:27 pm

    This is your issue:

    [class*=’col-‘]:last-of-type
    {
    padding-right: 0px;
    }

    # June 25, 2013 at 8:28 pm

    You need a “module” div to handle gutter: http://codepen.io/CrocoDillon/pen/ykCfA

    (or try an [alternative](http://justifygrid.com/))

    Abz
    # June 26, 2013 at 3:08 am

    I know what the issue is, the module ive used is “.work”. Just wondering if there’s any way around this?

    # June 26, 2013 at 4:18 am

    Okay so `.work` is your module but you still let the `col-` classes handle gutter, remove `padding-right` from them and add `margin: 0 10px;` to `.work`.

    Abz
    # June 26, 2013 at 4:37 am

    I’ve added
    [class*=’col-‘] {
    float: left;
    padding-right: 10px;
    padding-left: 10px;
    }

    and removed

    [class*=’col-‘]:last-of-type {
    padding-right: 0px;
    }

    which works :)

    # June 26, 2013 at 5:41 am

    Oh yeah, that would work as long as you don’t nest columns. `padding: 0 10px;` is the same as `padding-right: 10px; padding-left: 10px;` (assuming top and left is 0), but a lot shorter to write ;)

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".