Docs

[Chgrim]

Hi,

I am trying to get a clean scaling down to the iphone on my site http://www.topdownreviews.com/
I made my square images at the top 240×240 and my wide images 480 by 240. When I scale down I was hoping it would be 1 wide image and 2 square images beneath it. Instead, I get 1 wide image and 1 square image. How would I go about having two square images beneath the wide one?

Thanks
Chris

[Joao]

Hi Chris,

It is because your first column is part of the first Row and than there is the other 3 following columns of the first row.

If you want your itens to be displayed in a different way I recommend you to make this first section invisible on Mobile and Portrait Tablet and create another section for mobiles and portrait tablet (hiding on desktop, laptop, and landscape)

Please see screenshot, you can find this same Hidden based on screen size on Sections.

Hope it helps

Joao

[Chgrim]

Thanks so much! That was a great suggestion. I created two different versions but I still can’t get more than 1 image in a row when I switch to iPhone. I have tried making all size of images but it still stacks them one on top of another regardless the size. Is there something special I need to do to have 2-3 images in a row on the iPhone screen?

Thanks
Chris

[Christopher]

Hi there,

Columns stack on top of each other at 767px. In this case please divide each section into two columns, add text element to each column and insert images using image shortcode.

Hope that helps.

[Author]

Posts