Aligning objects (using flex-box)

SOLVE
Highlighted
Top Contributor

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

 

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Solution
Advisor | Elite Partner

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.

screenshot.jpg
screenshot-www.prometheusone.io-2020.10.20-20_50_46.png

Alyssa Wilie

Web Developer at LyntonWeb

If this answer solved your question, please mark it as the solution!

View solution in original post

3 Replies 3
Highlighted
Community Manager

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) 

@BootstrapC , @SandyG1 , @amwilie -- what do you all think 🙂

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

Developer_Tools_-_Home-keino_-_https___www_prometheusone_io_home-keino-0_hs_preview_qOglKNzO-35998890977.png

Thanks,

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!
Reply
0 Upvotes
Highlighted
Solution
Advisor | Elite Partner

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.

screenshot.jpg
screenshot-www.prometheusone.io-2020.10.20-20_50_46.png

Alyssa Wilie

Web Developer at LyntonWeb

If this answer solved your question, please mark it as the solution!

View solution in original post

Highlighted
Top Contributor

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 🙂