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🙂
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.
If this answer solved your question, please mark it as the solution.
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)
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.
If this answer solved your question, please mark it as the solution.
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 🙂