Menu icon Foundation
How to lose left and right padding?

Hiya,

I am using the code, below, to insert an image slider into my page.

I want the slider to be full-width, but the problem is that the .columns div has left and right padding of 0.9375rem .

I've looked in _settings.scss and there doesn't appear to be a setting for this. So is this something I need to solve by creating a new css class, or is there some way of controlling this via Foundation?

Thanks,
James

<div class="row">
    <div class="small-12 columns show-for-medium-up">
        <!-- actual slider code goes here -->
    </div>
</div>
            

         

padding

Hiya,

I am using the code, below, to insert an image slider into my page.

I want the slider to be full-width, but the problem is that the .columns div has left and right padding of 0.9375rem .

I've looked in _settings.scss and there doesn't appear to be a setting for this. So is this something I need to solve by creating a new css class, or is there some way of controlling this via Foundation?

Thanks,
James

<div class="row">
    <div class="small-12 columns show-for-medium-up">
        <!-- actual slider code goes here -->
    </div>
</div>
            

         
Rafi Benkual almost 5 years ago

You can leave it out of row column structure.

Also you can use a collapse class on the row.

James almost 5 years ago

Thanks. Collapse did the trick...

<div class="row collapse">