[Support request] No margins in 3 column grids

[Ramandeep]

Hello,
I am trying to use 3 columns grid. There is no possibility of adding margins.

Here is my grid-33 css code

.grid-33 {
    border: 1px solid #c3c3c3;
    margin: 4px;
    background-color: #f5f5f5;
    box-shadow: 0 2px 6px 0 rgba(0,0,0, .3);
}

When I try to reduce the width of grid in custom CSS, the site breaks down in mobile devices. Please help.

[David]

Hi there, the Unsemantic grid that is used in GP also has Tablet and Mobile classes. So you can assign these to your div’s.

tablet-grid-50 and mobile-grid-100

The numbers can be adjusted to suit so tablet can be set to 33 for example.

[Ramandeep]

It’s not working.

Please check – http://bit.ly/2sYxraS

[David]

Hi there, ok thats because the width 32% you have in your CSS is overwriting the tablet and mobile layouts.

There are a couple of work-arounds. You can either target the tablet and mobile classes and set their %’s e.g:

.mobile-grid-100 {
    width: 100%;
    margin: 0;
}

Or personally i wrap my content in its own div apply the styles to this and then add padding to the grid. This way the theme content that uses the unsemantic grid will remain unaffected.

So something like this:

<div class="my-grid grid-33 tablet-grid-50 mobile-grid-100">
    <div class="my-content-wrap">
        My HTML Content
    </div>
</div>

.my-content-wrap {
    border: 1px solid #c3c3c3;
    background-color: #f5f5f5;
    box-shadow: 0 2px 6px 0 rgba(0,0,0, .3);
}
.my-grid {
    padding: 4px;
    box-sizing: border-box;
}

[Author]

Posts