Menu icon Foundation
Row Margin Control

Where can the left/right margin be changed for the various screen sizes?

Other then when the screen is beyond the page max-width, there is no margin created when using a row on any of the pages and text is being cut off on the sides.

In the settings, global margin is set to 1rem. I tried changing that but it had no effect.

Thank you!

margin

Where can the left/right margin be changed for the various screen sizes?

Other then when the screen is beyond the page max-width, there is no margin created when using a row on any of the pages and text is being cut off on the sides.

In the settings, global margin is set to 1rem. I tried changing that but it had no effect.

Thank you!

Corey Schaaf over 3 years ago

To be clear, row's and columns DO NOT use margins. They use padding in foundation's framework. If you're trying to add margin, that would explain when the text is going beyond the page.  

For example, lets say you had 100px of space to play with. Let's say you had a box that was 80px. And to the left and right of that, there was padding of 10 px on each side. That adds up to 100px. Now, lets say you decided you wanted to add margin in addition to the padding to that box. Margin is added outside of that container and not inside. So your box would remain 100px but the moment you added another 10px margin to the left and right of it - you're in a sense, crushing the inside of your content which is why your text is expanding beyond the borders of the box. The width (with padding included) is going to remain 100px.  Obviously this scenario is different when you get into percentages, but the same rules apply. 

If you're looking to add margins (which is really padding) ... what I would suggest is markup that looks something like this: 

<div class="row">
  <div class="small-12 columns">
    <div class="row">
        <div class="small-12 columns">
          <p> this is where my content goes. Since I"m a nested row, there should be some default padding around me.  If you need more, you can use SASS to write your own custom class and add more padding if needed. </p>
        </div>
    </div>
  </div>
</div>

 

RCD over 3 years ago

Thank you Corey, very helpful! I am coming from Bootstrap and am used to putting a container around the page and having a margin created that way.

I tried putting a row around the content of the page like you suggested but the content shifted drastically to the left. 

<div class="row"> <!--Container Row -->
    <!-- Title -->
    <div class="sub-title-contain row"> 
      <div class="small-12 columns">
        <h2 class="sub-title">Title</h2>
      </div>
    </div>

    <div class="row">
      <div class="link-row">
        <a href="#general" class="link">General</a>
        <a href="#docs" class="link">Documents</a>
      </div>      
    </div>

    <div id="title" class="row">
      <h4>Title</h4>
    </div>

    <div class="row">
      <p>Text</p>
    </div>
</div> <!-- Container Row -->

It seems I have to go row column, row column; not two rows following each other.

 

Should I create a custom class for the page container?

Something like:

 

.container {
  margin: auto rem-calc(20px);
}

Rafi Benkual over 3 years ago

Yeah that could work. In version 6.2+ you have responsive gutters you can use:

http://zurb.com/university/lessons/getting-your-mind-in-the-gutter

If you are only trying to affect the outside spacing, then your container solution works!

RCD over 3 years ago

Thank you Rafi, it is working now.