Working out flow on small breakpoint

Hi all, hopefully this is simple

(Blocs 4.2.0
BigSur 11.2.3 )

I have a page that has several blocs with a Structure 4 Column in it. In each column there are:

Icon
Header
Text

These work fine for three breakpoints, LG, MD, SM but for XS I’d like the icon to be shown to the left of the header and text, not on top. The screen grabs show the column as it is, and as I’d like it for XS. Can this be done with a custom style? Or do I need a more complicated structure for each of these columns?

blocs slide 1

blocs slide 2

Thanks!

hi @Bloccali, Yes you can. Just wrap the text in a DIV container and use flex to align on smaller breakpoints. Sample file is here to get you going.

Fancy Column.bloc (717.9 KB)

Hi jerry,

That looks great, I see the principle of putting elements into DIVs and then applying behaviours to those.

But, I couldn’t get it to work, tried several times, and then copied your Bloc to my project. It didn’t work, so there must be something at a higher level stopping it. I shall see about investigating further.

Hmmm, for now I think I’ve given up on this.

@Jerry 's bloc works great on it’s own, but I cannot reproduce the behaviour on my site, and if I put his bloc in it doesn’t work. There is obviously something happening that stops the flex from working inside my project, and I’m not savvy enough about CSS at the moment to work out what.

The flex controls in the class editor need display set to flex to be applied.

Double check you have set that.

This is the Class flex setting for SM ,hopefully that is what you mean?

Your settings are wrong. Direction should be down (as said earlier) and justify should be off.

OK - I’ve been back at it and I’ve got it to work!! Yay!!!

Many thanks. @Jerry and @PeteSharp

1 Like