Breakpoints on medium devices

General Discussions
1

Hello,
Is there a way to control how the columns would be stacked on small/medium screens?. Take 4 columned row, for example. Once the screen is narrower it stacks from 4 columns layout into 1 column layout.
Thanks and regards,
Javier

2

Hey Javier,

Thanks for getting in touch! Did you want to change how it stacks into a 1 column layout on small devices? If so, you’ll have to override the CSS used via media queries. More information on the link below.
http://www.smashingmagazine.com/2010/07/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

You can also control medium and small breakpoints under Tools > Global Settings.

Hope this helps! :slight_smile:

Ben

3

We also have individual responsive layout settings on all rows, columns and modules under the advanced tab so I would suggest checking that out! :slight_smile:

Ben

4

Thanks for the quick response.
I’m not sure if I made myself clear. In my project, on the desktop version, I have four columns. When I step to the tablet version I want these four columns become two columns (instead of one column). With bootstrap it would be made as follows:
class= “col-md-2 col-lg-4”
Do I need to control it with custom css media-queries?
Javier

5

Hey Javier,

As Ben mentions, there are responsive settings you can use at the column level to accomplish this. For example, I pulled out a 4 column row in my dev site, added a text module to each and then proceeded to go to the first and second column settings (little book icon) > advanced tab > responsive layout and changed the medium device width settings to custom and 50%. Give it a shot and you’ll see how you can accomplish what you need there!

Best,
Billy

6

Hey Billy,
My mistake. I had already figure it out before I sent the message and I hadn’t even notice it. I’m a rookie, as you can see. Thanks a lot for the explanation!

Best,
Javier

7

No worries at all, Javier! :slight_smile: