Docs

[Floppe]

Hello,

On my website I got a row with a column layout of 1/6 + 5/6. Now when I view the page on a mobile device, the 2 different columns are displayed below each other, but I want them to keep their initially arrangement next to each other. How to reach this goal?

Thanks for your help

[Jade]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Floppe]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing back. Usually columns should display stacked for the mobile unless you specify width for them manually with CSS. So what you are facing is a bit unusual and unique so need to check your site. Let us know when you are ready to go live.

Cheers!

[Floppe]

Thanks for your answer. On mobile devices the columns of my websites are displayed stacked, but I want them to not to be stacked. How to reach this ?

[Paul R]

Hi,

You can add this under Custom > CSS in the Customizer.

@media (max-width: 767px) {

body .x-column.x-sm {
    float: left;  
    margin-right: 4%;
}
.x-column.x-1-2.x-sm {
    width: 48%;
}

.x-column.x-1-3 {
    width: 30.66666%;
}

.x-column.x-1-4 {
    width: 22%;
}
}

Hope that helps.

[Floppe]

Hello,

Unfortunately this doesn’t work.
In the attachments I added some screenshots of the relevant columns before and after resizing.
I want to remain the same arrangement of the columns on mobiles as on computers.

[Rad]

Hi there,

Columns automatically stacked on mobile for readability. You could try blockquote element instead of columns.

Thanks!

[Author]

Posts