topic Re: Aligning objects (using flex-box) in CMS Development

Aligning objects (using flex-box)

tette_engage — Mon, 19 Oct 2020 12:52:41 GMT

Hi!

I'm trying to vertically align an image and a text-box, and I stumbled upon this post suggesting using flex-box:

https://community.hubspot.com/t5/CMS-Development/Vertically-Aligning-text-element-within-a-container/m-p/378210#M19087

However, I can't get it to work? Am I putting the codes in the wrong places as nothing has changed? I first put the codes directly into the modules' inline styling in design tools, after which I gave them classes (.kuva-boxi (the wrapper) / .kuva-boxi-kuva (the pic) / .kuva-boxi-teksti (the text)) and added the codes into the main css.

It's the 'KEINO-SOVELLUKSEN EDUT' row if you want to inspect 🙂

https://www.prometheusone.io/home-keino-0?hs_preview=qOglKNzO-35998890977

Re: Aligning objects (using flex-box)

dennisedson — Tue, 20 Oct 2020 18:16:33 GMT

Hello @tette_engage !

Thanks for posting the question! Just to confirm, you want to top align the image and the text? So the top of the phone would match the position of the text? Any visual aid you have would help! Flexbox is definitely the way I would go about this. I did not see the flex property being applied to the container of the two columns, though. I see it a couple divs up. (See attached screengrab from inspector)

@Jake_Lett , @SandyG1 , @alyssamwilie -- what do you all think 🙂

(ps Firefox Developer Edition for the win with its highlighting of flex or grid content!)

Re: Aligning objects (using flex-box)

alyssamwilie — Wed, 21 Oct 2020 01:56:37 GMT

Yep, it's just the styling being in the wrong place. @tette_engage I would remove the .kuva-boxi-kuva and .kuva-boxi-teksti wrappers so that the hubspot widget-spans are whats getting aligned. Then move your flex css into .kuva-boxi > .row-fluid-wrapper > .row-fluid.

Re: Aligning objects (using flex-box)

tette_engage — Wed, 21 Oct 2020 07:17:29 GMT

THANK YOU, THANK YOU, THANK YOU! That did the trick 🙂 Also, I can apparently leave the css-class to the text to for e.g. mobile styling, if someone else is wondering 🙂