Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Margin/Padding on first column

Home Forums Support Margin/Padding on first column

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #390390
    Max

    Tom
    I have set up a four column grid using GP semantic grid.

    Each of the columns contains text. I want a 1px border on both the left and right of each column.

    These dividers will only be displayed in tablet and full screen and I will use @media to hide them on phone view.

    I achieve this with the using the how-box-first class on the div for the first column and then the how-box class for the remaining columns along with the following css:

    .how-box-first {
        border-left: 1px solid #000;
        border-right: 1px solid #000;  
    }
    
    .how-box {
        border-right: 1px solid #000;
    }

    The problem is that on the left side of the first column there is no padding. That is, the text is hard up against the border. All of the remaining columns are fine.

    I can fix this with the following additional code:

    .how-box-first {
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        margin-left:-20px;
        padding-left:20px;
    }
    
    .how-box {
        border-right: 1px solid #000;
    }

    However it is a dirty fix as the left border of the first column sits 20px to the left of the alignment on the remainder of the page.

    Is there a better solutions to this issue?

    Thanks in advance.

    Max

    GeneratePress 1.4
    GP Premium 1.4.3
    #390586
    Leo
    Staff
    Customer Support

    Hi there,

    Can you link me to the site?

    Thanks!

    #390825
    Max

    Local development on xamp.

    #390832
    Leo
    Staff
    Customer Support

    Do you have a test server you can duplicate it on?

    Very hard to visualize things like this without seeing the live site.

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