Changing images to 2 in a row on Mobile View

Hi there, Im wanting to have my images two in a row on Mobile. I cant seem to figure out how to do this. on desktop they are 4 in a row…
You can see it on mobile view in the picture, my url is www.honestlynatural.com.au. Hope you can help.
Thanks

Hi There,

Thanks for writing in!

I can see you have added the images in separate columns. This is the default behaviour of columns on mobile device it will stack with each other. To avoid this, please make the section single column and add all the 4 images there.
to manage spacing you can adjust the margin of the images.
Similarly you can do another row with single column and add another 4 images.
In this case the images wont stack in mobile device.

Hope this helps!

I have changed the images to two columns of four, however it is still stacked on mobile. Also any tips on changing the margins, when I try it starts to overlap on mobile, any specific settings to be able to widen the gaps between the images? And bring up the second column closer to the top one

Thanks

Hey Nonie,

It’s because the images can’t fit inside the column anymore so they stack. If you shrink them so they will fit, please note that the text inside your image will also shrink so it might be hard to read. Regretfully, that is the layout offered in the theme for now.

It’s technically possible to achieve but his would need custom CSS Flexbox and/or Media Queries which could easily get quite complex.

To widen the gaps, you will need to use the margin controls of each Image element. Please give us a screenshot of the overlap so we could understand the issue better.

Alternatively, you can either use The Grid or Essential Grid for this use case. Both plugins offer responsive column layouts so you can have 4 column on desktop and 2 on mobile and it won’t stack. For more details and usage instructions, please check the links below:

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.