Menu icon Foundation
small-centered question

Hi all, first time i try to us Zurb and i need your help,

i have the code you will see and i thought that

small-centered kicks in only when viewing with a small screen but i see that it does not (?) please tell me if i am wrong.

and related to that, can i use these classes (small-centered) on other elements besides div for example is it recommended to use it on img

mm, just remembered the large-uncentered,

does this mean if i want 3 images in a row for big screens and then in small screens to display them one by one i have to use something like

div small-3 small centered large-uncentered columns

Thanks

<div class="row home-gallery">
    		<div class="small-11   large-3 columns small-centered large-uncentered ">
				<img src="<?php bloginfo('stylesheet_directory'); ?>/images/bathrobes.jpg"/>
					<div class="row nested-padding">
						<div class="large-12 columns">
							<img src="<?php bloginfo('stylesheet_directory'); ?>/images/tshirts.jpg"  />
						</div>
					</div>
			</div>
</div>
            

         

small-centeredmedia query

Hi all, first time i try to us Zurb and i need your help,

i have the code you will see and i thought that

small-centered kicks in only when viewing with a small screen but i see that it does not (?) please tell me if i am wrong.

and related to that, can i use these classes (small-centered) on other elements besides div for example is it recommended to use it on img

mm, just remembered the large-uncentered,

does this mean if i want 3 images in a row for big screens and then in small screens to display them one by one i have to use something like

div small-3 small centered large-uncentered columns

Thanks

<div class="row home-gallery">
    		<div class="small-11   large-3 columns small-centered large-uncentered ">
				<img src="<?php bloginfo('stylesheet_directory'); ?>/images/bathrobes.jpg"/>
					<div class="row nested-padding">
						<div class="large-12 columns">
							<img src="<?php bloginfo('stylesheet_directory'); ?>/images/tshirts.jpg"  />
						</div>
					</div>
			</div>
</div>
            

         
Rafi Benkual almost 4 years ago

What you have done there will take a column that is 11 wide and center it within a row.

If you want to center multiple images, you can nest the grid or use the block grid.

You won't be able to use small-centered on an image because that class has CSS that works with items that are display block.

Instead you can use .text-center on images.

dimitrisbak almost 4 years ago

Thank you Rafi, i will check my code again and let you know.

btw how do i correctly format my code here? : )

Thanks again.

dimitrisbak almost 4 years ago

I am still trying to understand how to do what i want : )

will blog grid work with variable dimensions images?

what i am trying to do is have 5 images,

3 in first row and another 2 below them.The problem is that the center image in the first row is bigger that then rest so i am trying to nest the images to do it but still i am not sure if this is the best method.

Rafi Benkual almost 4 years ago

The grid centering classes are for a single column in a row. Are you trying to do this?
https://notebooks-beta.zurb.com/posts/10030795?t=a4c187dcc78575ae

dimitrisbak almost 4 years ago

a bit different

https://drive.google.com/file/d/0BzSzE4zAFWcpc05fa1Jfd2VyTmc/view?usp=sharing

so far i did it with 3 columns and the i nested the small ones to place the bottom (2x) images in them.

Rafi Benkual almost 4 years ago

Yeah, that sounds right!

I would do - 3 columns, 6 columns, 3 columns

dimitrisbak almost 4 years ago

Super, still working on it and the whole site, i have problems with the paddings etc but hopefully i will get there.I am trying to use Zurb with WordPress.

ps. was the thread moderated because of my link?