Menu icon Foundation
Offset or..?

Im just learning this whole thing and have created a VERY basic 2 column page two try and understand some concepts. I defined a couple rows, each with medium-6 columns and then each column has a panel with some text.

As i resize from desktop size to something medium (between 990-640px) one of the columns gets pushed down the page because the columns above are not exactly the same size. (see image attch)

So, my question is, is this a case for using offset or should i be using nth child to identify the div and offset it manually by using a position property?

Everything looks as expected once i get to single column below 640px.

Ive also added some partial code..its very basic of course. Im just trying to grasp some concepts at this point. thanks for any advice.

2columns

<div class="row">
      	<header class="large-10 large-centered columns mainheader text-center">
  			<h4>TITLE GOES HERE</h4>
  				<h4>SUB-TITLE</h4>
  				<h4>SOMETHING ELSE</h4>
  		</header>
  	</div>	
    <div class="row">
    	<div class="medium-6 columns">
    		<img src="img/placeholder-sign.jpg" />
    	</div>
    	<div class="medium-6 columns">
    		<p class="panel">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 
    		dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
    		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
    		sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  Lorem ipsum dolor sit amet,
    		consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
    	</div>
    </div>
     <div class="row">
    	<div class="medium-6 columns">
    		<ul class="no-bullet panel">
    		    <li class="text-center"><strong>Box Header</strong></li>
    			<li><a href = "#" onClick="return false;">A Link Goes Here</a></li>
    			<li><a href = "#" onClick="return false;">A Link Goes Here</a></li>
    			<li><a href = "#" onClick="return false;">A Link Goes Here</a></li>
    			<li><a href = "#" onClick="return false;">A Link Goes Here</a></li>
    			<li><a href = "#" onClick="return false;">A Link Goes Here</a></li>
    			<li><a href = "#" onClick="return false;">A Link Goes Here</a></li>
    		</ul>
    	</div>
    	<div class="medium-6 columns">
    		<ul class="no-bullet panel">
    		    <li class="text-center"><strong>Box Header</strong></li>
    			<li><a href = "#" onClick="return false;">A Link Goes Here</a></li>
    			<li><a href = "#" onClick="return false;">A Link Goes Here</a></li>
    			<li><a href = "#" onClick="return false;">A Link Goes Here</a></li>
    			<li><a href = "#" onClick="return false;">A Link Goes Here</a></li>
    			<li><a href = "#" onClick="return false;">A Link Goes Here</a></li>
    			<li><a href = "#" onClick="return false;">A Link Goes Here</a></li>
    		</ul>
    	</div>
            

         

offsetcolumns

Im just learning this whole thing and have created a VERY basic 2 column page two try and understand some concepts. I defined a couple rows, each with medium-6 columns and then each column has a panel with some text.

As i resize from desktop size to something medium (between 990-640px) one of the columns gets pushed down the page because the columns above are not exactly the same size. (see image attch)

So, my question is, is this a case for using offset or should i be using nth child to identify the div and offset it manually by using a position property?

Everything looks as expected once i get to single column below 640px.

Ive also added some partial code..its very basic of course. Im just trying to grasp some concepts at this point. thanks for any advice.

2columns

<div class="row">
      	<header class="large-10 large-centered columns mainheader text-center">
  			<h4>TITLE GOES HERE</h4>
  				<h4>SUB-TITLE</h4>
  				<h4>SOMETHING ELSE</h4>
  		</header>
  	</div>	
    <div class="row">
    	<div class="medium-6 columns">
    		<img src="img/placeholder-sign.jpg" />
    	</div>
    	<div class="medium-6 columns">
    		<p class="panel">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 
    		dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
    		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
    		sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  Lorem ipsum dolor sit amet,
    		consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
    	</div>
    </div>
     <div class="row">
    	<div class="medium-6 columns">
    		<ul class="no-bullet panel">
    		    <li class="text-center"><strong>Box Header</strong></li>
    			<li><a href = "#" onClick="return false;">A Link Goes Here</a></li>
    			<li><a href = "#" onClick="return false;">A Link Goes Here</a></li>
    			<li><a href = "#" onClick="return false;">A Link Goes Here</a></li>
    			<li><a href = "#" onClick="return false;">A Link Goes Here</a></li>
    			<li><a href = "#" onClick="return false;">A Link Goes Here</a></li>
    			<li><a href = "#" onClick="return false;">A Link Goes Here</a></li>
    		</ul>
    	</div>
    	<div class="medium-6 columns">
    		<ul class="no-bullet panel">
    		    <li class="text-center"><strong>Box Header</strong></li>
    			<li><a href = "#" onClick="return false;">A Link Goes Here</a></li>
    			<li><a href = "#" onClick="return false;">A Link Goes Here</a></li>
    			<li><a href = "#" onClick="return false;">A Link Goes Here</a></li>
    			<li><a href = "#" onClick="return false;">A Link Goes Here</a></li>
    			<li><a href = "#" onClick="return false;">A Link Goes Here</a></li>
    			<li><a href = "#" onClick="return false;">A Link Goes Here</a></li>
    		</ul>
    	</div>
            

         
Rafi Benkual over 4 years ago

Just noticed you are missing a dix tag at the end.

This is the layout you created http://codepen.io/anon/pen/VYzJQw

If you want the gap between the row below to be smaller, you need a taller image like http://codepen.io/anon/pen/OPjeQb

You can make an image stretch with CSS as well http://codepen.io/anon/pen/WbEqME but this will distort the image.

jd payne over 4 years ago

thanks for the reply i must've missed the div tag when i clipped the code from the rest of the page. The image is actually square and lined up properly at full size - what you are seeing is the image getting a bit smaller as the page is made smaller. Im really not interested in stretching the image - i want the text below it to fill in the gap. I will keep searching for a solution.

Shoaib Iqbal over 4 years ago

Hi, for the below div to take up the empty space firstly you had to use single .row as row clears floats, and secondly use a masonry grid layout like http://masonry.desandro.com or a css only masonry http://w3bits.com/css-masonry/

jd payne over 4 years ago

ok thanks for that reference. i thought i saw an example once where someone used a nth-child and then a negative position property.

Shoaib Iqbal over 4 years ago

Hi jd,
You had two rows, so nth-child(3) will not work for the columns, you can use the following code to pull it up.

.row.second .columns:first-child{
  position: relative;
  top: -123px;
}

jd payne over 4 years ago

Thanks much. i think you have me going in the right direction although that solution didnt really do it. I did however try some alternatives, including the nth-child such as

@media only screen and (max-width: 990px) and (min-width: 640px){
.row:nth-child(3) .columns:first-child{
  position: relative;
  top: -123px;
}}

but the results are inconsistent as the page size changes. I think your original suggestion of the masonry grid is the best solution but i am really trying to get my arms around one philosophy at a time :).

Do you suppose there is a way to integrate that masonry capability within this framework? Anyway, thanks for your time on this...cheers.

Rafi Benkual over 4 years ago

Yes, we wrote a lesson on doing it: http://zurb.com/university/lessons/65

jd payne over 4 years ago

Sweet im on it! Thanks.