I love the row columns and being able to take better control of the real estate of larger screens, especially at full width, but I’d really like the columns to be more responsive.
For example, having a row with four columns might look great on a wide screen, but the break point to bring it to a single column is too low and it breaks from 4 columns down to 1.
I think in most circumstances it would be much more beneficial to be able to set a minimum width of the columns and when 4 columns break under that width, turn it into a 2×2 grid. When the columns within the 2×2 grid break under the width, do go to a single column layout.
A min-width setting itself isn’t the answer, and I know media queries likely are, but beyond my present ability.
Is this something that is on any todo list or could it be?
Or would someone mind giving me a few pointers on what classes to play against.
I don’t want to run a child theme just to run media queries, is it possible to use the custom css module? will it load in such a way that would allow overriding the defaults without breaking anything else?
I’m not comfortable with media queries (yet!) but plan to try and get a grasp of it for this little project
Any help appreciated, thanks
note: I’ve flagged this as Page Builder since I think that’s most appropriate, but I’m using the Vantage Premium theme so not sue which is the better choice :)
Hi Madivad :)
If you head over to Settings > Page Builder > Layout you can adjust the global Page Builder collapse point. Hopefully that’ll sort out the challenge you’re facing.
Let me know how you come along.
I know that’s the default “go-to” answer, but that is an all encompassing “smash all columns to a single column at this point” type of fix. (actually, I didn’t even know about THAT settings screen, I was looking at the menu breakout value before this, and I’ve read that answer multiple times elsewhere and didn’t put 2 and 2 together lol)
What is needs to do is have a second value tied into that (or use the same or 90% (arbitrary) value) whereby once a column or group of columns falls under that second value then they become a single columns. For example, a couple of scenarios:
go to mobile view at 400px
1. 2 columns need to be 200px (box sized) to break into single column mode
2. 4 columns need to be 100px to break into single column mode, and 100px isn’t enough to read the text, but 400 is still wide enough for 2 columns, or maybe even 3.
3. (for the sake of an argument) 8 columns need to fall to 50px…
What needs to happen is the columns break out before 50px, 100px, even 200px. It would be good to implement some way to have the columns break into mobile view at the device width setting (or some arbitrary setting slightly smaller than it)
It would be a nice to have this as a feature.
I think this would be best served with media queries. It’s something I have to learn about, so I’ll have a look over the next few days.
There is an example here: http://madivad.net.au/rowtest/ however I’ll need the IP address of your office to unblock it as the site is still very early development.
Apologies for the delay. Your reply slipped through my usual notifications.
Solid feedback for sure. Unfortunately, at this stage the selective and variable responsive collapse control you’re looking for, isn’t available in Page Builder functionality. I’ll mark this thread as a feature request. We go through our feature request threads regularly and appreciate the feedback.