Flex option on section

Beta
#1

Is there meant to be a flex section on sections?
For example I’ve made the section 100vh as a hero but having the flex options that are in rows/columns would be good to position this using the builder.

#2

In that case you don’t have to do that. Just give any of your columns flexbox layout and min-height: 100vh; Take a look:

www.loom.com/share/dd4429114b1f4d9bbaacecb12399bfb0

#3

Thanks for that @Georgich - really useful walkthrough!

Is that the “proper” way to do it then, sizing the inner elements bigger to auto size the outer container?

Also, I guess that the height would still need to be overwritten with CSS in media queries for mobile changes?

Thanks again!

#4

I think you are right. There is a topic about that (not height, it’s about padding, but it is the same problem). You can give your +1

https://theme.co/apex/forum/t/mobile-breakpoints-padding-feature-request/61800/5

If you want to control min-height / height with media queries, you should add something like that in COLUMN / CUSTOMIZE / CSS:

@media and screen (max-width: 767px) {
  $el {
    min-height: 50vh;
  }
}

I think it’s a good (maybe best) idea to have an options to contol height / width / padding / margin based on @media quieries. It takes a lot of time to write code. I think copy / paste style in this case will not be usefull at all.

#5

Thanks for all that info.

The media queries is how I’ve been doing stuff up until now and it’s great in this release to see the column amount selection for different devices, it would be good to have the options for other sizes within the different devices too, to save putting the extra styling on top as it can be a pain sometimes remembering where you put it!

#6

@RubberDuckers, thanks for writing in! At the moment, the best way to manage hero sections would be something similar to @Georgich’s example of putting 100vh on a Column’s min-height and then using it’s internal settings to lay things out. This is absolutely an acceptable way to achieve the same effect. We have generally steered clear of putting height controls in particular on things like sections and rows because of the responsive issues they can bring in, but they are on those Elements for now and I would recommend using them at this time. Down the road once we work in for users to set values at different breakpoints, that will be a time for us to revisit some of the more foundational Elements and if we want to add those controls in at those levels.

1 Like
#7

Awesome thanks! @Georgich’s recommendation has worked a treat, loving the new features in the Beta, adding Flexbox functionality to change things on the fly is so good and saves adding in custom classes or going into elements to do it.

Looking forward to the full release!

1 Like
#8

Glad to hear that’s working for you! Thanks for letting us know.

2 Likes