Menu icon Foundation
Full width row with grid row content

Just a quick one, help would be appreciated. In F5 I'm trying to code a full width div/row and have the content fit back on grid. I'm using the below code. I get my full width div/row but can't get content inside back on grid? Any ideas? Thanks in advance.

HTML 
----------------------------------
<div class="fullWidth">
    <div class="row large-12 columns">
    <p>content here</p>
  </div>
</div>



CSS 
----------------------------------

.fullWidth { 
width: 100%; 
margin-left: auto; 
margin-right: auto; 
max-width: initial; 
}
            

         

F5htmlcssgrid

Just a quick one, help would be appreciated. In F5 I'm trying to code a full width div/row and have the content fit back on grid. I'm using the below code. I get my full width div/row but can't get content inside back on grid? Any ideas? Thanks in advance.

HTML 
----------------------------------
<div class="fullWidth">
    <div class="row large-12 columns">
    <p>content here</p>
  </div>
</div>



CSS 
----------------------------------

.fullWidth { 
width: 100%; 
margin-left: auto; 
margin-right: auto; 
max-width: initial; 
}
            

         
Wing-Hou Chan over 5 years ago

Hey Gareth!

Remove div.fullWidth and remove .row from your second div.

I think the result for with my suggestions is what you want, but if it isn't be sure to post here again!

Marc McGee over 5 years ago

I also include the row, but not in the same div as the column — and add an extra row to avoid the margin left and right.

<div class="row fullWidth">
    <div class="row">
    <div class="large-12 columns">
    <p>content here</p>
  </div>
  </div>
</div>