CMS columns on mobile

Is it possible to change the CMS columns layout on mobile? Like regular columns?
When I try changing the layout only on mobile it changes on all screen sizes.

Here is my public share link:

Consider the 2 main tabs on the right:

  • the Style tab, contains anything CSS properties
  • the Settings tab, contains:
  • settings for widgets, such as how many columns for a ROW widget, and
  • HTML parameters
  • unique ID names
  • HTML5 tags
  • custom attributes

Anything in the Style tab applies to the CSS code, so when you change something in it:

  • it applies to the currently selected element AND to all others elements with the same class name on all the site
  • it can have a different value for each of the responsive breakpoints: desktop, mobile…

Anything you change in the Settings tab applies to the HTML code

  • it applies only to the element that’s selected (NOT to his sibling with the same class name for example), on the page you’re in
  • it applies for all responsive breakpoints

And there is no way to circumvent this.

In your case, you need your ROW elements to have a different amount of columns depending on the device. That’s not possible at all and there is no recommendable trick to do it. (There is but it’s messy and not recommendable)

So you got to do your own columns system with CSS. Using Divs, using flexbox, anything, but not a Row Widget.

If you tell us exactly what you’re after we can advise you.

1 Like

I’m not sure you understand my question.
I was looking for this:

But on the CMS grid.
Anyway I found a solution giving a class to the CMS item and a width in %.
It would be a nice feature to have the grid breaking points on mobile devices, just like the columns.

Oh, ok. Sorry.

Then yes you can use width in %, and flexbox on the container for more control.

1 Like

Thanks @vincent :grinning:

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