CODEWITHSUNDEEP
htmlcsszurb-foundation
Yossi
Yossi

Reputation: 1056

Zurb Foundation 5 - Row padding/margin

I am trying to create a background color for my row, yet when I set a background color it extends over the regular width of my columns. Then I tried making the row smaller with padding, which works, but makes the columns smaller. I need to somehow remove the pink area, keep only the red background, AND keep the columns even.

Any ideas?

enter image description here

<!-- When applying the padding, the columns background turns OK. However, the
columns themselves aren't as even as "normal" columns without padding -->

<div class="row" style="background-color: pink; padding-right: 15px; padding-left: 15px; ">
        <div class="large-3 columns" style="background-color: red;">
        text1
        </div>
        <div class="large-3 columns" style="background-color: red;">
        text2
        </div>
         <div class="large-3 columns" style="background-color: red;">
        text3
        </div>
        <div class="large-3 columns" style="background-color: red;">
        text4
        </div>
</div>

<!-- The background of the columns is same for all of the columns, and it's 
bigger than the image because of the padding -->
<div class="row">
    <div class="large-3 columns" style="background-color: teal;">
        text1
    </div>
        <div class="large-3 columns" style="background-color: teal;">
        text2
    </div>
         <div class="large-3 columns" style="background-color: teal;">
        text3
    </div>
        <div class="large-3 columns" style="background-color: teal;">
        text4
    </div>
</div>
<!-- This image has a padding in the column, so it's not the whole width of 
the row -->
<div class="row">
    <div class="large-12 columns" style="background-color: grey;">
        <img alt="slide image" src="http://placehold.it/1000x15">
    </div>
</div>

Upvotes: 3

Views: 11743

Answers (1)

Sudheer
Sudheer

Reputation: 2985

One way is to remove column padding as this causes you to see the pink background in the row div and add margin for row to have them aligned.

.columns{
     padding-left: 0rem;
    padding-right: 0rem;
}
.row{
     margin-left: 0.83333rem;
    margin-right: 0.83333rem;
    width:auto;
}

Here is a Fiddle

Upvotes: 4

Related Questions