-
Posts
-
Hello,
On my website I currently have 3 columns next to each other.
When I scale the screen down, the columns stay side by side until they become very narrow, and then they switch to full width at the mobile breakpoint.Is it possible to make it so that the first two columns stay next to each other, while the third one moves below them and is centered? After that, it should switch to the mobile layout as usual.
have a look at: https://webers-testseite.de/7er-mega-div/
all you need for css is thereHi,
@Guenni007 nice solution with flex, but @wesleyborgman is using Equal Height columns which changes the layout.Best regards,
MikeNot really—don’t use the “equal-height” option; instead, set the “align-items: stretch” option for the flex container.
Take another look at the example page.
By the way: “align-items: stretch” is the default value on flex containers — so you don’t need to specify it explicitly._____________ just for info ______________
/* === flex container settings (default values): === */ flex-direction: row /* === Side by side, not one below the other. === */ flex-wrap: nowrap /* === Everything on a single line, no line breaks. === */ justify-content: flex-start /* === Everything left-aligned (on the vertical axis). === */ align-items: stretch /* === Full height (on the horizontal axis). === */ /* === Items Settings (default values): === */ flex-grow: 0 /* === No automatic filling of empty space. === */ flex-shrink: 1 /* === Shrinking is permitted if space is limited. === */
Hi,
What I ment was that when the columns are set to equal height the dev structure changes and display:table; is used on the flex_columnBest regards,
MikeYes — and what I mean by that is that you can achieve consistent column heights even without using
display: table.
By the way, I’ve never understood why Enfold chose this method instead of using a true flex layout.Hi,
Ok thanks @Guenni007, so @wesleyborgman note that with Guenni007’s example you will need to disable the Equal Height option in your columns.Best regards,
Mikeunderstanding that flexbox layout:
https://webers-testseite.de/flex-columns-understanding/Hi,
Glad that Guenni007 could help, thanks Guenni007, if you have further questions please open a new thread and we will try to help. Thanks for using Enfold.Best regards,
Mike
- The topic ‘Need help with responsive columns’ is closed to new replies.