CODEWITHSUNDEEP
htmlcssrowzurb-foundationgrid-layout
user3101431
user3101431

Reputation: 407

Foundation 1 row of 6 images on desktop and 2 rows of 3 images on mobile?

I have 6 square images, all the same dimensions. I am trying to use Foundation to lay them out so that on desktop, they are on a single row but on mobile they are on 2 rows of 3, but I just can't figure it out. This is what I've tried:

<div class="row">
    <div class="large-12 columns">
        <div class="large-2 columns"><img src="{{ 'image1.jpg' | theme_image_url }}" /></div>
        <div class="large-2 columns"><img src="{{ 'image2.jpg' | theme_image_url }}" /></div>
        <div class="large-2 columns"><img src="{{ 'image3.jpg' | theme_image_url }}" /></div>
        <div class="large-2 columns"><img src="{{ 'image4.jpg' | theme_image_url }}" /></div>
        <div class="large-2 columns"><img src="{{ 'image5.jpg' | theme_image_url }}" /></div>
        <div class="large-2 columns"><img src="{{ 'image6.jpg' | theme_image_url }}" /></div>
    </div>
</div>

This works alright on desktop(although there are some centering issues), but on mobile each image has it's own line.

This is what I am going for:

Desktop: enter image description here

Mobile:
enter image description here

Any ideas on how to accomplish this?

Upvotes: 2

Views: 1221

Answers (2)

Dara
Dara

Reputation: 88

You don't need to define size classes for each div. You can use Foundation's block grid instead. Simply define size classes in the parent element. This is Foundation way of achieving these type of layouts.

<ul class="small-block-grid-3 large-block-grid-6">
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
</ul>

Upvotes: 0

alexej_d
alexej_d

Reputation: 448

You can do it as follows (notice the "small" classes):

<div class="row">

        <div class="large-2 small-4 columns"><img src="{{ 'image1.jpg' | theme_image_url }}" /></div>
        <div class="large-2 small-4 columns"><img src="{{ 'image2.jpg' | theme_image_url }}" /></div>
        <div class="large-2 small-4 columns"><img src="{{ 'image3.jpg' | theme_image_url }}" /></div>
        <div class="large-2 small-4 columns"><img src="{{ 'image4.jpg' | theme_image_url }}" /></div>
        <div class="large-2 small-4 columns"><img src="{{ 'image5.jpg' | theme_image_url }}" /></div>
        <div class="large-2 small-4 columns"><img src="{{ 'image6.jpg' | theme_image_url }}" /></div>

</div>

Upvotes: 3

Related Questions