Column collapse or stack control


#1

I can’t find where to change the collapse or stacking of columns moving from a large screen to a smaller one. I.e. you want to collapse a 2 column layout to a one column on top of the second column at mobile or tablet. Or perhaps you don’t want the columns to collapse when using buttons for example.

Is the current implementation fixed so that it always stacks for mobile?


2 column structure in tablet view
#2

Why not use a mobile-only bloc and a tablet+desktop bloc to get the right layout?


#3

How would you stop the 2 Column collapsing in the mobile only Bloc?


#4

If the content inside the two columns is sized for mobile, it shouldn’t collapse, should it?


#5

I just tried that and it still collapses for mobile.


#6

Why not make a small example and post the project so we can see?


#7

Started to create a simple file but it is not behaving the way I am expecting. I will dig deeper into this.

What I still don’t understand is if I set a 2 Column Bric to display in mobile, how it is configured to not collapse.


#8

Well, I don’t understand why it would collapse if the content will fit. I would make an example, but it’s better if you do the usecase that suits you.

Generally for mobile I would go single column anyway.


#9

The application here is to create 2 buttons side by side that remain side by side on all devices. Currently the 2 buttons collapse when they would not only look better but use less space if the 2 Col was not collapsed. I have searched the settings and can’t find a way to stop the collapse for mobile. Similarly if I wanted to have say 5 social icons on a row, I would like them to remain in a row and not stack on top of each other for mobile.


#10

Hmm. Yes, they stack. The bootstrap code looks fine. I don’t know enough about bootstrap to know why this happens.


#11

I think the default is just set to always stack for mobile.

@Norm Any chance of a column setting to not stack for Tablet and/or Mobile?


#12

@webdeersign Yes, but I have no release date right now. But it’s coming, hopefully in version 2 timeline.


#13

Sounds like a good follow up to the discussion in the previous thread ([Columns order and object alignment] (Columns order and object alignment)).

On the most basic level there is “col-xs-6” which will be two columns across all breakpoints. I have shown a basic RAW HTML example (Not a Blocs example), I assume this is what you mean?

In the meantime you could maybe do your own manually with the HTML widget Bric, or manually after export. However you will probably have to contend with any CSS overrides that Blocs has in place already as well, concerning styling or create your own in addition to get it how you want.

So as @mackyangeles says, “more structure blocs” or even better to have the ability to set the desired structure for Blocs and Brics via the UI concerning the Bootstrap Grid Classes, push & pull, etc., or a more expansive use of the Bootstrap Grid in available Blocs/Brics.

:wink:

Blocs_User


#14

Agreed. It’s an important basic feature to have I think. I use it very often and would be lost without collapse options.

Good to hear that Norm has it on the list.