CSS changes to put space between boxes

Hello,
I'd like to add spacer between boxes with images (groups, invites, etc..)
I try to add
.col-sm-2{
margin: 10px;
}
and I get whet I want but last box goes to next line.
How to do it so all 6 stay in the same row?

Regards,
Marcin

  • Adam Czajczyk

    Hey Marcin,

    I hope you're well today and thanks for this question!

    I've visited your site. Is the in-cubator site the one?

    If so, the reason why your last box goes to the next row is most likely screen resolution related. On this site I can see all the six boxes in a row, however when I decrease my screen resolution to some point they all stay in a row but the space between them is missing.

    The media queries should solve this. Take a look here please:

    http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    For example, you may want to test you site and if you find out that for resolutions of 1280px and more (width) boxes are fine but for lower resolutions layout breaks. Therefore you could add something like this to your CSS:

    @media screen and (max-width: 300px) {
    .col-sm-2{
    margin: 5px;
    }
    }

    This would make margin ("spacer") smaller, thus preventing breaking the row. If it doesn't help you may also want to add some more rules inside this media query to make boxes smaller. Once this is working you can add more media queries like this, specifying various resolutions and rules that would be applied to this resolutions only.

    I hope that helps and if you have any further questions, please let me know!

    Cheers,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.