CODEWITHSUNDEEP
htmlcsszurb-foundation
Learning
Learning

Reputation: 20001

how to make four image show in single row in zurb foundation when row width 960px

I new to zurb fooundation fromework and have an issue to make four images show in single row when screen size is 960px

http://jsfiddle.net/57fBK/1/ i have set my row width to 960px for desktop version.

I want 4 image to show when screen size is between 768px - 960px.

and i want two image to show when screen size is between 320px - 769px;

<div class="row">

        <div class="large-3 small-6 columns">   
          <img src="http://placehold.it/480x600&text=[img 1]"/> <p></p>
        </div>

        <div class="large-3 small-6 columns">
           <img src="http://placehold.it/480x600&text=[img 2]"/> <p></p>

        </div>
        <div class="large-3 small-6 columns">  
           <img src="http://placehold.it/480x600&text=[img 3]"/> <p></p>

        </div>
        <div class="large-3 small-6 columns">    
           <img src="http://placehold.it/480x600&text=[img 4]"/> <p></p>

        </div>

Upvotes: 0

Views: 101

Answers (1)

JAre
JAre

Reputation: 4756

Simply add medium-3 http://jsfiddle.net/57fBK/2/

<div class="small-6 medium-3 large-3 columns">   
  <img src="http://placehold.it/480x600&text=[img 1]"/> <p></p>
</div>

<div class="small-6 medium-3 large-3 columns">
   <img src="http://placehold.it/480x600&text=[img 2]"/> <p></p>

</div>
<div class="small-6 medium-3 large-3 columns">  
   <img src="http://placehold.it/480x600&text=[img 3]"/> <p></p>

</div>
<div class="small-6 medium-3 large-3 columns">    
   <img src="http://placehold.it/480x600&text=[img 4]"/> <p></p>     
</div>

Upvotes: 1

Related Questions