Align Images, Text, And Button For Recommended Reading

Regular Contributor

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. 

 

Screen Shot 2019-10-24 at 10.16.34 AM.pngScreen Shot 2019-10-24 at 10.16.39 AM.png

Reply
0 Upvotes
5 Replies 5
Advisor

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.

Reply
0 Upvotes
Highlighted
Regular Contributor

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?

Reply
0 Upvotes
Advisor

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.

Reply
0 Upvotes
Regular Contributor

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

Reply
0 Upvotes
Advisor

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.

Reply
0 Upvotes