Menu icon Foundation
row for full width website

Hello All,

I was wondering if someone could help me out? I am currently using foundation to create a custom wordpress theme and i was just wondering why my 12 column grids are not registering properly i have attached the code below is this the right way to go about it?

<div class="row">
<div class=" 12 columns first-row">

<p> Lorem ipsum dolor sit amet, eos ea convenire principes, vim at omittantur persequeris, sed deserunt scripserit mediocritatem ea. No dolorem noluisse definitiones eos, no veniam maiorum ancillae his. Impedit verterem torquatos cum in. Eum vulputate incorrupte appellantur ne, et ullum corrumpit imperdiet vis. Ne indoctum consequuntur sea, eos dolores petentium signiferumque ea, te usu dolore fierent adversarium. Nec alia lorem no. Est cu agam vocibus abhorreant, qui commodo delenit intellegam in.

In vim altera molestie moderatius, unum veritus euripidis at pro, ex amet vocent nam. Eirmod splendide rationibus ius te, nec ei etiam nonumy equidem. Ad mel apeirian mediocrem, exerci mediocrem ut nam. Eos id ignota debitis. Usu te adversarium disputationi, congue constituam ei eum.

Est eu malorum maiorum commune, eu est tota accusamus. Vis at dicit tamquam hendrerit, at sed omnesque posidonium. Pri in tota legimus. Id atqui vitae quo, munere aliquam et pro, in simul quidam sed.

Lobortis iracundia cu vel. Eos ad molestie corrumpit urbanitas, ne pri tota atqui aliquam. Eam ut oratio propriae omnesque, ut soleat ignota vix. Nec ex duis iudico percipit, iudicabit deseruisse ex nam. Commune urbanitas persequeris nam te. Vis no euismod lucilius.

Semper accumsan menandri te eos. No habeo nemore nam. Accusamus incorrupte vix at. Eu nemore ponderum interpretaris ius, persius vivendo eu est. Sed te affert prompta accusata, id vel dicam patrioque definitiones.  </p>





</div>
</div>





<div class="row">
<div class=" 12 columns second-row">

<div class="large-3 medium-4 second-row-modal ">

<p>Lorem ipsum dolor sit amet, eos ea convenire principes, vim at omittantur persequeris, sed deserunt scripserit mediocritatem ea. No dolorem noluisse definitiones eos, no veniam maiorum ancillae his. Impedit verterem torquatos cum in. Eum vulputate incorrupte appellantur ne, et ullum corrumpit imperdiet vis. Ne indoctum consequuntur sea, eos dolores petentium signiferumque ea, te usu dolore fierent adversarium. Nec alia lorem no. Est cu agam vocibus abhorreant, qui commodo delenit intellegam in.

In vim altera molestie moderatius, unum veritus euripidis at pro, ex amet vocent nam. Eirmod splendide rationibus ius te, nec ei etiam nonumy equidem. Ad mel apeirian mediocrem, exerci mediocrem ut nam. Eos id ignota debitis. Usu te adversarium disputationi, congue constituam ei eum.

Est eu malorum maiorum commune, eu est tota accusamus. Vis at dicit tamquam hendrerit, at sed omnesque posidonium. Pri in tota legimus. Id atqui vitae quo, munere aliquam et pro, in simul quidam sed.

Lobortis iracundia cu vel. Eos ad molestie corrumpit urbanitas, ne pri tota atqui aliquam. Eam ut oratio propriae omnesque, ut soleat ignota vix. Nec ex duis iudico percipit, iudicabit deseruisse ex nam. Commune urbanitas persequeris nam te. Vis no euismod lucilius.

Semper accumsan menandri te eos. No habeo nemore nam. Accusamus incorrupte vix at. Eu nemore ponderum interpretaris ius, persius vivendo eu est. Sed te affert prompta accusata, id vel dicam patrioque definitiones.</p>


</div>
</div>
</div>




<div class="row">
<div class=" 12 columns third-row">

<p> Lorem ipsum dolor sit amet, eos ea convenire principes, vim at omittantur persequeris, sed deserunt scripserit mediocritatem ea. No dolorem noluisse definitiones eos, no veniam maiorum ancillae his. Impedit verterem torquatos cum in. Eum vulputate incorrupte appellantur ne, et ullum corrumpit imperdiet vis. Ne indoctum consequuntur sea, eos dolores petentium signiferumque ea, te usu dolore fierent adversarium. Nec alia lorem no. Est cu agam vocibus abhorreant, qui commodo delenit intellegam in.

In vim altera molestie moderatius, unum veritus euripidis at pro, ex amet vocent nam. Eirmod splendide rationibus ius te, nec ei etiam nonumy equidem. Ad mel apeirian mediocrem, exerci mediocrem ut nam. Eos id ignota debitis. Usu te adversarium disputationi, congue constituam ei eum.

Est eu malorum maiorum commune, eu est tota accusamus. Vis at dicit tamquam hendrerit, at sed omnesque posidonium. Pri in tota legimus. Id atqui vitae quo, munere aliquam et pro, in simul quidam sed.

Lobortis iracundia cu vel. Eos ad molestie corrumpit urbanitas, ne pri tota atqui aliquam. Eam ut oratio propriae omnesque, ut soleat ignota vix. Nec ex duis iudico percipit, iudicabit deseruisse ex nam. Commune urbanitas persequeris nam te. Vis no euismod lucilius.

Semper accumsan menandri te eos. No habeo nemore nam. Accusamus incorrupte vix at. Eu nemore ponderum interpretaris ius, persius vivendo eu est. Sed te affert prompta accusata, id vel dicam patrioque definitiones. </p>

</div>
</div>




<div class="row">
<div class=" 12 columns fourth-row">

<p> Lorem ipsum dolor sit amet, eos ea convenire principes, vim at omittantur persequeris, sed deserunt scripserit mediocritatem ea. No dolorem noluisse definitiones eos, no veniam maiorum ancillae his. Impedit verterem torquatos cum in. Eum vulputate incorrupte appellantur ne, et ullum corrumpit imperdiet vis. Ne indoctum consequuntur sea, eos dolores petentium signiferumque ea, te usu dolore fierent adversarium. Nec alia lorem no. Est cu agam vocibus abhorreant, qui commodo delenit intellegam in.

In vim altera molestie moderatius, unum veritus euripidis at pro, ex amet vocent nam. Eirmod splendide rationibus ius te, nec ei etiam nonumy equidem. Ad mel apeirian mediocrem, exerci mediocrem ut nam. Eos id ignota debitis. Usu te adversarium disputationi, congue constituam ei eum.

Est eu malorum maiorum commune, eu est tota accusamus. Vis at dicit tamquam hendrerit, at sed omnesque posidonium. Pri in tota legimus. Id atqui vitae quo, munere aliquam et pro, in simul quidam sed.

Lobortis iracundia cu vel. Eos ad molestie corrumpit urbanitas, ne pri tota atqui aliquam. Eam ut oratio propriae omnesque, ut soleat ignota vix. Nec ex duis iudico percipit, iudicabit deseruisse ex nam. Commune urbanitas persequeris nam te. Vis no euismod lucilius.

Semper accumsan menandri te eos. No habeo nemore nam. Accusamus incorrupte vix at. Eu nemore ponderum interpretaris ius, persius vivendo eu est. Sed te affert prompta accusata, id vel dicam patrioque definitiones. </p>

</div>
</div>


/*--------------------------------------------------------------------------------------
 first row
---------------------------------------------------------------------------------------*/
.first-row{
Background: #ffffff;
height: auto;
overflow:auto;
}

.first-row p{

font-size:25px;
margin-left:1%;
color:#000000;
text-align:left;
max-width: 1000px;
width:100%;
margin: 0 auto;
/*margin-top:50px;
margin-bottom:50px;*/
}
/*--------------------------------------------------------------------------------------
 END first column
---------------------------------------------------------------------------------------*/
            

         

Fondationfull-widthrow

Hello All,

I was wondering if someone could help me out? I am currently using foundation to create a custom wordpress theme and i was just wondering why my 12 column grids are not registering properly i have attached the code below is this the right way to go about it?

<div class="row">
<div class=" 12 columns first-row">

<p> Lorem ipsum dolor sit amet, eos ea convenire principes, vim at omittantur persequeris, sed deserunt scripserit mediocritatem ea. No dolorem noluisse definitiones eos, no veniam maiorum ancillae his. Impedit verterem torquatos cum in. Eum vulputate incorrupte appellantur ne, et ullum corrumpit imperdiet vis. Ne indoctum consequuntur sea, eos dolores petentium signiferumque ea, te usu dolore fierent adversarium. Nec alia lorem no. Est cu agam vocibus abhorreant, qui commodo delenit intellegam in.

In vim altera molestie moderatius, unum veritus euripidis at pro, ex amet vocent nam. Eirmod splendide rationibus ius te, nec ei etiam nonumy equidem. Ad mel apeirian mediocrem, exerci mediocrem ut nam. Eos id ignota debitis. Usu te adversarium disputationi, congue constituam ei eum.

Est eu malorum maiorum commune, eu est tota accusamus. Vis at dicit tamquam hendrerit, at sed omnesque posidonium. Pri in tota legimus. Id atqui vitae quo, munere aliquam et pro, in simul quidam sed.

Lobortis iracundia cu vel. Eos ad molestie corrumpit urbanitas, ne pri tota atqui aliquam. Eam ut oratio propriae omnesque, ut soleat ignota vix. Nec ex duis iudico percipit, iudicabit deseruisse ex nam. Commune urbanitas persequeris nam te. Vis no euismod lucilius.

Semper accumsan menandri te eos. No habeo nemore nam. Accusamus incorrupte vix at. Eu nemore ponderum interpretaris ius, persius vivendo eu est. Sed te affert prompta accusata, id vel dicam patrioque definitiones.  </p>





</div>
</div>





<div class="row">
<div class=" 12 columns second-row">

<div class="large-3 medium-4 second-row-modal ">

<p>Lorem ipsum dolor sit amet, eos ea convenire principes, vim at omittantur persequeris, sed deserunt scripserit mediocritatem ea. No dolorem noluisse definitiones eos, no veniam maiorum ancillae his. Impedit verterem torquatos cum in. Eum vulputate incorrupte appellantur ne, et ullum corrumpit imperdiet vis. Ne indoctum consequuntur sea, eos dolores petentium signiferumque ea, te usu dolore fierent adversarium. Nec alia lorem no. Est cu agam vocibus abhorreant, qui commodo delenit intellegam in.

In vim altera molestie moderatius, unum veritus euripidis at pro, ex amet vocent nam. Eirmod splendide rationibus ius te, nec ei etiam nonumy equidem. Ad mel apeirian mediocrem, exerci mediocrem ut nam. Eos id ignota debitis. Usu te adversarium disputationi, congue constituam ei eum.

Est eu malorum maiorum commune, eu est tota accusamus. Vis at dicit tamquam hendrerit, at sed omnesque posidonium. Pri in tota legimus. Id atqui vitae quo, munere aliquam et pro, in simul quidam sed.

Lobortis iracundia cu vel. Eos ad molestie corrumpit urbanitas, ne pri tota atqui aliquam. Eam ut oratio propriae omnesque, ut soleat ignota vix. Nec ex duis iudico percipit, iudicabit deseruisse ex nam. Commune urbanitas persequeris nam te. Vis no euismod lucilius.

Semper accumsan menandri te eos. No habeo nemore nam. Accusamus incorrupte vix at. Eu nemore ponderum interpretaris ius, persius vivendo eu est. Sed te affert prompta accusata, id vel dicam patrioque definitiones.</p>


</div>
</div>
</div>




<div class="row">
<div class=" 12 columns third-row">

<p> Lorem ipsum dolor sit amet, eos ea convenire principes, vim at omittantur persequeris, sed deserunt scripserit mediocritatem ea. No dolorem noluisse definitiones eos, no veniam maiorum ancillae his. Impedit verterem torquatos cum in. Eum vulputate incorrupte appellantur ne, et ullum corrumpit imperdiet vis. Ne indoctum consequuntur sea, eos dolores petentium signiferumque ea, te usu dolore fierent adversarium. Nec alia lorem no. Est cu agam vocibus abhorreant, qui commodo delenit intellegam in.

In vim altera molestie moderatius, unum veritus euripidis at pro, ex amet vocent nam. Eirmod splendide rationibus ius te, nec ei etiam nonumy equidem. Ad mel apeirian mediocrem, exerci mediocrem ut nam. Eos id ignota debitis. Usu te adversarium disputationi, congue constituam ei eum.

Est eu malorum maiorum commune, eu est tota accusamus. Vis at dicit tamquam hendrerit, at sed omnesque posidonium. Pri in tota legimus. Id atqui vitae quo, munere aliquam et pro, in simul quidam sed.

Lobortis iracundia cu vel. Eos ad molestie corrumpit urbanitas, ne pri tota atqui aliquam. Eam ut oratio propriae omnesque, ut soleat ignota vix. Nec ex duis iudico percipit, iudicabit deseruisse ex nam. Commune urbanitas persequeris nam te. Vis no euismod lucilius.

Semper accumsan menandri te eos. No habeo nemore nam. Accusamus incorrupte vix at. Eu nemore ponderum interpretaris ius, persius vivendo eu est. Sed te affert prompta accusata, id vel dicam patrioque definitiones. </p>

</div>
</div>




<div class="row">
<div class=" 12 columns fourth-row">

<p> Lorem ipsum dolor sit amet, eos ea convenire principes, vim at omittantur persequeris, sed deserunt scripserit mediocritatem ea. No dolorem noluisse definitiones eos, no veniam maiorum ancillae his. Impedit verterem torquatos cum in. Eum vulputate incorrupte appellantur ne, et ullum corrumpit imperdiet vis. Ne indoctum consequuntur sea, eos dolores petentium signiferumque ea, te usu dolore fierent adversarium. Nec alia lorem no. Est cu agam vocibus abhorreant, qui commodo delenit intellegam in.

In vim altera molestie moderatius, unum veritus euripidis at pro, ex amet vocent nam. Eirmod splendide rationibus ius te, nec ei etiam nonumy equidem. Ad mel apeirian mediocrem, exerci mediocrem ut nam. Eos id ignota debitis. Usu te adversarium disputationi, congue constituam ei eum.

Est eu malorum maiorum commune, eu est tota accusamus. Vis at dicit tamquam hendrerit, at sed omnesque posidonium. Pri in tota legimus. Id atqui vitae quo, munere aliquam et pro, in simul quidam sed.

Lobortis iracundia cu vel. Eos ad molestie corrumpit urbanitas, ne pri tota atqui aliquam. Eam ut oratio propriae omnesque, ut soleat ignota vix. Nec ex duis iudico percipit, iudicabit deseruisse ex nam. Commune urbanitas persequeris nam te. Vis no euismod lucilius.

Semper accumsan menandri te eos. No habeo nemore nam. Accusamus incorrupte vix at. Eu nemore ponderum interpretaris ius, persius vivendo eu est. Sed te affert prompta accusata, id vel dicam patrioque definitiones. </p>

</div>
</div>


/*--------------------------------------------------------------------------------------
 first row
---------------------------------------------------------------------------------------*/
.first-row{
Background: #ffffff;
height: auto;
overflow:auto;
}

.first-row p{

font-size:25px;
margin-left:1%;
color:#000000;
text-align:left;
max-width: 1000px;
width:100%;
margin: 0 auto;
/*margin-top:50px;
margin-bottom:50px;*/
}
/*--------------------------------------------------------------------------------------
 END first column
---------------------------------------------------------------------------------------*/
            

         

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

Looks like there is an issue with your grid syntax.

Should look like:

<div class="row">
  <div class="small-2 large-4 columns">...</div>
  <div class="small-4 large-4 columns">...</div>
  <div class="small-6 large-4 columns">...</div>
</div>

See http://foundation.zurb.com/docs/components/grid.html

We made a tutorial here: http://t.co/0e9bXmaM9o

Harout over 4 years ago

Hello,

Rafi thank you for the reply, I see that you have created a single row and within the row you have nested divs. This is not what I would like to achieve i would like to achieve something like this http://www.zeek.com/ how would i go about achieving this?

Rafi Benkual over 4 years ago

I was pointing out that your grid syntax was not correct.

Making a 12 columns row is done like:

<div class="row">
  <div class="small-12 columns">...</div>
</div>

To make rows span full width, in your CSS do:

.row {
  max-width: 100%;
}

Harout over 4 years ago

Thank you very much Rafi, but the .row is already already at 100% why would I add another small -12 columns to that. From what i understand that is so that when you are looking at the site on a mobile phone it is 12 columns in width. isnt 12 columns the same as having the div at 100%?

Harout over 4 years ago

Hello Rafi,

thank you very much i have got a grasp on it now.