Breakpoints - Columns

[strobley]

Hi Themeco,

How to adjust the number of columns at different breakpoints?

For all breakpoints greater than 768px it should display 4-col in 1 row.
Once it reaches breakpoint 767px or less I would like 2-col stacked, not 1-col stacked with is the currrent the behaviour.

I can do this in Visual Composer using the Column Settings > Responsive Options / Width & Responsiveness.

Is there some CSS I can use in X to achieve the same functionality.

I realise I can create two rows and show a different one for different breakpoint, however this is duplicaiton of code, hacky and not very elegant.

[nico]

Hi @strobley,

Thanks for writing in.

You could use @media query to achieve specific site responsiveness.

Output different image resolutions for different devices

Or you could use the hide during breakpoints.

Hide During Breakpoint - Explained

Hope it helps.

Let us know how it goes.

Thanks.

[strobley]

Hi Nico,

I am not asking regarding images so the first option you have provided is no help at all. I am asking about stacking columns and different breakpoints, please read my question.

I know about the second option of hidding at breakpoints and again included in my original question - it is duplicaiton of code, hacky and not very elegant.

[nabeel]

Hi again,

Sorry for the confusion, to learn more about different breakpoints you should refer to this thread https://theme.co/apex/forum/t/responsive-breakpoints/27481/2 you can use the breakpoints by following that thread and adjust the layout as per your need, for example if you need to display 2 columns for 767px or less, you can use the following code:

@media (min-width: 481px) and (max-width: 767px) {
    .x-column.x-1-4 {
        width: 50% !important;
        float: left;
    }
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Hope this helps!