4 columns on Desktop, 2 on Tablet, 1 on Mobile

[procos]

Hi Themeco,

we have a row in our page (designed with cornerstone) with 4 columns but would like this row to display as 2 columns on tablet and then 1 column on Mobile.

Currently it jumps from 4 to 1.

Should this be achieved with media queries based on screen width, and if so, could you indicate us the CSS code to apply to each column?

Or are there any Bootstrap type classes that can be applied “out of the box” on the columns?

We are using the Integrity stack and noticed that the Portfolio page has a more responsive behavior Is it possible to achieve this?

Thank you for your help

[Joao]

Hi There,

Please provide us your URL and point the specific section you are referring to.

Thanks!

[procos]

Hi João,

we are currently working in a private network (before making the website live) so it is not accessible.

It there a generic solution that can be applied for this?

We are using the Integrity stack. The columns we want can be marginless or with margin (does not make a difference).

Thank you

[christian]

Hey @procos,

Regretfully, there is no responsive column classes in X. You can copy responsive column classes available in frameworks like Bootstrap and apply the class to the column.

If you’re using Marginless Columns, just note that it’s display value is table-cell and it’s row’s display is table so you need to take that into account.

Hope that leads you to the right direction.