Menu icon Foundation

Developer | Diepenbeek, Belgium

In my spare time I enjoy everything about webdevelopment. I'm sort of an all round webdeveloper. Not a professional, not a beginner anymore but let's say intermediate level. I have learnt about HTML, CSS, SASS, PHP, MySQL, Wordpress, Javascript, JQuery, Node.js, Bower, Gulp, etc...

My Posts



  • 5
    Replies
  • Nesting columns inside columns

    By Jimmy G

    Foundationgrid

    Via http://zurb.com/responsive I found the following site: http://www.trinitysf.com/ As you can see from below html, div's with the "columns" class are nested inside other div's with columns class WITHOUT putting them into a div with a "row" cl... (continued)

    Last Reply by Jimmy G over 2 years ago



My Comments

Jimmy G commented on Jimmy G's post over 2 years

My mistake, I was using .medium-collapse on the row, .collapse seems to do the job for me...

Jimmy G commented on Jimmy G's post over 2 years

Hi, thanks for your answer.
I did read the docs before I posted this. I only want to collapse the space between the columns but not the space between the screen edge and the first columns or the last column and the screen edge.
Has foundation a solution fort his or do I have to add the padding manually?
Thanks
 
Jimmy

Jimmy G commented on Jimmy G's post over 2 years

Ok thanks a lot Dominique & Rafi, I appreciate your answers! I'm working on a site where I need a bunch of searchfields spread over more than one row and in the right order. When using more than one row I wasn't getting the result I expected to get but now I found following solution. 
It's one row with 6 "column" divs inside but they add up to more than one line as you can see.
Do you guys think this is a good solution and a good way to achieve this or is there a better or more elegant solution to achieve this?
Thanks a lot in advance!
Jimmy
 
<div class="row">

<div style="background-color: #ededed" class="small-12 medium-3 large-2 columns">Status</div>

<div style="background-color: #3debed" class="small-12 medium-9 large-6 columns">Location</div>

<div style="background-color: #ededed" class="small-12 medium-3 large-2 columns">Type</div>

<div style="background-color: #dddddd" class="small-12 medium-3 large-2 columns">Subtype</div>

<div style="background-color: #ededed" class="small-12 columns medium-4 large-3">
<div class="row">
<div style="background-color: #ededed" class="small-6 columns">Min. price</div>
<div style="background-color: #ededed" class="small-6 columns end">Max. price</div>
</div>
</div>

<div style="background-color: #ededed" class="small-12 medium-2 large-2 columns">Search</div>

</div>
 

Jimmy G commented on Jimmy G's post over 2 years

Hi what do you mean with summarized? Normally the colums must add up to 12 inside a row but in my and your example there a 3 divs with a class of large-12 + large-6 + large-6 that add up to 24? I didn't know this was possible?
 
Jimmy  

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Jimmy G's post over 2 years

My mistake, I was using .medium-collapse on the row, .collapse seems to do the job for me...

You commented on Jimmy G's post over 2 years

Hi, thanks for your answer.
I did read the docs before I posted this. I only want to collapse the space between the columns but not the space between the screen edge and the first columns or the last column and the screen edge.
Has foundation a solution fort his or do I have to add the padding manually?
Thanks
 
Jimmy

You commented on Jimmy G's post over 2 years

Ok thanks a lot Dominique & Rafi, I appreciate your answers! I'm working on a site where I need a bunch of searchfields spread over more than one row and in the right order. When using more than one row I wasn't getting the result I expected to get but now I found following solution. 
It's one row with 6 "column" divs inside but they add up to more than one line as you can see.
Do you guys think this is a good solution and a good way to achieve this or is there a better or more elegant solution to achieve this?
Thanks a lot in advance!
Jimmy
 
<div class="row">

<div style="background-color: #ededed" class="small-12 medium-3 large-2 columns">Status</div>

<div style="background-color: #3debed" class="small-12 medium-9 large-6 columns">Location</div>

<div style="background-color: #ededed" class="small-12 medium-3 large-2 columns">Type</div>

<div style="background-color: #dddddd" class="small-12 medium-3 large-2 columns">Subtype</div>

<div style="background-color: #ededed" class="small-12 columns medium-4 large-3">
<div class="row">
<div style="background-color: #ededed" class="small-6 columns">Min. price</div>
<div style="background-color: #ededed" class="small-6 columns end">Max. price</div>
</div>
</div>

<div style="background-color: #ededed" class="small-12 medium-2 large-2 columns">Search</div>

</div>
 

You commented on Jimmy G's post over 2 years

Hi what do you mean with summarized? Normally the colums must add up to 12 inside a row but in my and your example there a 3 divs with a class of large-12 + large-6 + large-6 that add up to 24? I didn't know this was possible?
 
Jimmy  

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content