Responsive columns does not work after 100%

Support
#1

The following kind of setup does not work… :frowning: still requires custom css to effect, which I had hoped to avoid with all the awesome new responsive features.

image

Because tablet widths are somewhat of an odd duck for good UX we’re opting for something complex. However, the settings do not take effect. Breaking down from XL & LG (1/3 + 2/3) to MD (1/1 full width), it will not return to multiple columns (1/3 + 2/3) for SM and back to fullwidth (1/1) on XS.

Can someone explain why and/or whether this will be fixed?

Many thanks! :slight_smile:

#2

Hi @skndal,

Thanks for reaching out!

The direction property is just working fine. The reversing only works in the direction of the main axis. So if the direction is row , reversing only works on the main axis. Once it collapses to one column , that’s working on the cross axis.

It was properly explained on the link below with some examples.

Hope that helps.

#3

Hi @marc_a , Thanks for responding. Your answer pertains to the direction reverse, which is fair, since I did not update the thread subject. Apologies. But my post and question were about multiple columns and whether/why I could not revert to 1/3 + 2/3 after going fullwidth on tablets. Looking forward to your response, thanks!

#4

Hi @skndal,

We are not sure what exact problem you are having with the Layout width for the Columns, and the screenshot does not explain your problem too. Can you please explain it a bit more, any screen-captured video will help us to recognize your problem. I would also request you provide the Page URL where you are having this problem, so we can check that too.

Thanks

#5

Hi @tristup,

Thanks, apologies if it was not clear. Very simple to reproduce:

  • Take any Cornerstone install with the primary width set to XL
  1. Create a section, row and 2 columns
  2. Set the row layout according to the screenshot: (33%+66% on XL and LG, 100% on MD, 33%+66% on SM, and 100% again on XS width)
  3. Make sure you have something (gap, text or whatever element) inside each column
  4. Preview the layout in different widths:

You will notice that, after going to 100% width (on MD width), the row layout will not re-columnize even when I have set it to 33% + 66% on SM width.

That is to say: you can only go down to 100% width for responsive layouts, not back to multiple columns on smaller widths. Seems like a bug or omission to me, something wrong with the CSS?

Hope this helps.
– M

#6

Hey M,

That has to do with the Base Breakpoint. Based on your screenshot, your Base Breakpoint is currently set to XL.

image

Try lowering down your Base Breakpoint to MD. That can be set in Theme Options > Layout and Design

image

To learn more about the Base Breakpoint, check out our tutorial here https://www.youtube.com/watch?v=JCJkQazeRQU&t=551s

Hope that helps.

#8

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