[Support request] No margins in 3 column grids

Home Forums Support [Support request] No margins in 3 column grids

Home Forums Support No margins in 3 column grids

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #597037
    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.

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #597082
    David
    Staff
    Customer Support

    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.

    #597116
    Ramandeep

    It’s not working.

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

    #597124
    David
    Staff
    Customer Support

    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;
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.