Menu icon Foundation
problem with image sized when using large block grid

i am new to foundation so sorry if my question is a little silly. i was under the impression that if i have three images within a large-block-grid-3 class, they should show up on the screen next to eachother and should take up a third each of the 12 coumns, eg, 4 columns each.

but this is not happening. i have 2 images next to each other then one underneath, and it seems that the sizes of the images are there original values, eg, my third images is 800px wide, should this not be resized to fit in 4 columns?

any advice is welcomed.

thanks

ps. i have left the bit of code that i am working with below

 <div class="row">


    <div class="large-12 columns">
        <ul class="large-block-grid-3">
            <li><img src="img/commercial.png"></li>
           <li><img src="img/domestic.png"></li>
           <li><img src="img/security.png"></li>   
       </ul>
    </div>

</div>
</div>           

         

grid image

i am new to foundation so sorry if my question is a little silly. i was under the impression that if i have three images within a large-block-grid-3 class, they should show up on the screen next to eachother and should take up a third each of the 12 coumns, eg, 4 columns each.

but this is not happening. i have 2 images next to each other then one underneath, and it seems that the sizes of the images are there original values, eg, my third images is 800px wide, should this not be resized to fit in 4 columns?

any advice is welcomed.

thanks

ps. i have left the bit of code that i am working with below

 <div class="row">


    <div class="large-12 columns">
        <ul class="large-block-grid-3">
            <li><img src="img/commercial.png"></li>
           <li><img src="img/domestic.png"></li>
           <li><img src="img/security.png"></li>   
       </ul>
    </div>

</div>
</div>           

         
Rafi Benkual almost 5 years ago

Yes, the block-grid will split the image width into 1/3's (33.3333%). http://codepen.io/anon/pen/Hqlsx

You should try writing this mobile first, so specify the small-block-grid so on small it will have 3 in a row.