Prevent images from stacking

Hi there
In a row I have 4 coloumn and in each I have an image which has a link.
If I watch it on my phone the images are stacked. I don‘t mind if the images are stacked if I hold my phone the vertical/ upright way but if I hold my phone the horizontal way I would like them from then on not to stack. I would like that 2 of 4 images are beside each other. That means per row 2 coloumns/ images…?
I also would like the images to be in the center of the coloumn :blush:
Hope you can help

Hi Jenny,

Please go to the Customize tab of the section that you want to have the columns be side by side and add the sidebyside class there:

Then please go to X > Theme Options > CSS and add the code below:

@media (min-width: 486px) and (max-width: 767px) {
 .sidebyside .x-column {
    width: 46%;
    float: left;
 }   
}

The code above will force the 2 columns layout between browser width size of 486 to 767 pixels which is the standard mobile landscape mode.

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

Also, to force the content of the column to be centered, click on the image element and from the top breadcrumbs section click on the columns which will take you to that specific column settings:

Scroll down and you will see the option to center stuff there:

For more detailed information I suggest that you read the Cornerstone/Content Band section of our Knowledge Base overview.

Thank you.

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