Menu icon Foundation
Block-grid Display

anyone here know how to control block-grid features?

i would like to display 1 column pic on 240px and lower on mobile screen
and 2 column pic on 320px, 480px and 640px mobile screen
4 column on large screen

block grid

anyone here know how to control block-grid features?

i would like to display 1 column pic on 240px and lower on mobile screen
and 2 column pic on 320px, 480px and 640px mobile screen
4 column on large screen

Karl Ward over 5 years ago

You would need to redefine the $small media query in foundation, because by default this goes up to 640px. What mobile devices have 240px or lower? Even the first iphone released in 2007 has 320px short side, so I am not sure what devices would show 1 column. I would recommend sticking with the queries defined in foundation ... If you want to walk your own path, you should be using SASS and be able to edit the settings file ... If not, you are kinda on your own, and will need to define your own vanilla CSS media queries from scratch.

Generally speaking, the format would be something like this for the grid, but with different breakpoints than you specify:

<div class="row">
  <div class="small-12 medium-6 large-3 columns">...</div>
  <div class="small-12 medium-6 large-3 columns">...</div>
  <div class="small-12 medium-6 large-3 columns">...</div>
  <div class="small-12 medium-6 large-3 columns">...</div>
</div>

This is for the grid, but I assume you can do similar with the block-grid, although in your case I don't see any reason why you would need to use the block-grid.

Jay Dcoder over 5 years ago

thanks

my phone samsung duos have 240px portrait display, but 320px on landscape
i just want to learn how to tweak this grid and block-grid features

Karl Ward over 5 years ago

Sure, but then even an old iphone would get 2 columns in vertical orientation ... But anyway, it is fine to change the definitions of the media queries if you are using SASS. Just edit the _settings.scss file. If you are not using sass, then it would be tedious to try to use foundation native column classes ... It would probably be easier to define your own media queries.

Rafi Benkual over 5 years ago

Each class of block-grid lets you define a size and # of images in a row.

This is how:

<ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-4">
  <li><img src="http://placeimg.com/350/350/arch"></li>
  <li><img src="http://placeimg.com/350/350/arch"></li>
  <li><img src="http://placeimg.com/350/350/arch"></li>
  <li><img src="http://placeimg.com/350/350/arch"></li>
</ul>