[Resolved] Margin/Padding on first column

[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

[Leo]

Hi there,

Can you link me to the site?

Thanks!

[Max]

Local development on xamp.

[Leo]

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

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

[Author]

Posts