Aligning objects (using flex-box)

[tette_engage]

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...

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

[dennisedson]

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!)

[alyssamwilie · Accepted solution]

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.

[tette_engage]

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 🙂