Align Images, Text, And Button For Recommended Reading

[karengerberry]

Okay so we have a section on our blog that is recommended reading. How do I make sure that the text, images, and buttons are all breaking together. The images and buttons need to always be inline. 

[Kevin-C]

Hey @karengerberry 

You could take a few approaches to this.

Truncate the title with Hubl. See here. Or with JS. See here.

If you wish to avoid truncating I would suggest using CSS Flexbox.

Hope this gets you moving in the correct direction.

[karengerberry]

Thank you! I think we would want to go the flexbox route. Is there inline styling that we can use? 

Or is it best to build something in the CSS and then use that class on any global group you want to have it apply to?

[Kevin-C]

Hey @karengerberry 

Scalability is king! That's something people say right?

To answer your question, yes you could do this with inline css, but it is not most manageable nor scalable in the long run. I would go with your second option. Build css and attach it externally.

Css Tricks has put together an awesome guide to flexbox here. if you're not super familiar with it yet.

[karengerberry]

Thank you! If we opt for the inline styling what would I place in that area?

[Kevin-C]

Unfortunately thats depends on how the inline CSS is being applied. If you're applying it via the drag and drop editor, inlining might no be an option. My apologies for not thinking about that the first time through.

If you could post or DM a live version of the page I know we could figure this out rather quickly.