2 columns on Mobile

Hello

Is there CSS code to consistently keep 2 columns on mobile. I don’t want for a specific application. I want to be able to use it over and over with Pro.

Thanks.

If you are trying to convert a 4 column to 2 column on mobile, the following CSS should work

@media screen and (max-width: 767px ){
.x-column.x-1-4 {
width: 47%;
}
.x-column.x-1-4:nth-of-type(2n) {
margin-right: 0px;
}
}

maybe play with something similar for 2 column on mobile & desktop

Just trying to help out

1 Like

Do I need a style on the row or section? nothing is happening at this stage.

Also, what about 3 column, or 5 or 6?

I didn’t need to add a class to anything as the .x-column.x-1-4 class is inherent to the Pro theme

If you send me over a url where you have tried the code I’ll take a look

as for 3 column, 5 or 6… I’m not sure it would work well for odd numbers as you would end up with a lone item on its own row. also not sure Pro supports 6 columns natively

That doesn’t change the columns too two, just the test fields to half width, but in a fullwidth single row.

do you have a link?
my css converts a 4 column row into a 2 column row (on mobile)

Can’t share publicly.

No problem but I can’t help further (I’m only a fellow user of Pro, and not staff)

but from what you mentioned above “But in a full width single row”… the row would have to be a 4 column row for my code to work, not a full width single row

yeah, it’s a 4 column row.

Hey There,

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.

Thank you in advance.

So, first I don’t a tailored solution to a URL, I want general code that can be applied to more than one site. And as I said above I can’t publically share the URL.

Hi there,

You do not need to publicly share the URL. You can use the Secure Note feature of the post to send us the URL and the info privately.

The general solution will be to add a unique class to a section which you want to have a 2 column mobile view for example oncolumnmobile

Then you can add the CSS code below to Pro > Launch > Theme Options > CSS:

.oncolumnmobile .x-column {
    width: 48%;
    float: left;
    margin: 1%
}

So from now on whenever you add the class to a section it will turn into a 2 column mode on mobile.

Thank you.

This works for 2 columns staying as 2 columns, but I have features listed in 6 columns and it still turns into 1 really long list.

Hi There,

Please provide the URL and point the specific section.

Thanks!

2 columns stay as 2, more than 2 go to 1.

Hi There,

based on your design I would suggest you setting a different Amenities differently:

1/1 ROW Feature Headline
1/2 + 1/2 two block grid elements with 3 columns each and you can add an icon list inside each block grid element.

You can find the icon shortcode list here:

demo.theme.co/integrity-1/shortcodes/icons/

That would make your content behave closer to what you are looking for on mobile and desktop.

Hope it helps

So when you say 1/2 + 1/2 you mean 2 rows. I tried that and got it turning into 2 columns, 1 column, 2 columns, 1 column on mobile.

I’ve just used a different solution.

Hey There,

The nesting of sections, rows and columns is not possible in the editor. That is why Joao suggested that you create two rows and in the second row, you can have two columns (1/2 + 1/2). In each of the columns you insert a block grid element and inside each of the grid element, you can insert the icon shortcode. For more details on how you can do a nested layout in Cornerstone, this video might help you:

Please ignore my response if you have already resolved your issue.

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