Latest News Collection Not aligning correctly

Hi

I have an alignment issue with a collection created when viewed on iPads etc. The last two articles are not aligning properly (see screen shot). There’s also a major issue in Explorer and Opera

cheers
David


Here is my public share link: https://preview.webflow.com/preview/abbey?preview=0121e8bc88a27f4aff0cf2c76c5c4578
(how to access public share link)

Hey @1960creative thanks for reaching out! I took a look at your site structure and noticed that you’re using columns for your layout. I would suggest to instead use divs that are set to float left and take up a certain percentage width of the page as well as being set to relative position. That way you can align the widths easily for each breakpoint. As it looks like you need more width for those columns to display the text for the longer worded headlines.

Also the custom code used for your Facebook plugin has a fixed pixel width on it instead of a percentage based width which is causing the breakage.

​Please let me know if this is helpful, if not, I’m happy to help further. :slight_smile:

Your dynamic list item for the congratulations emily is encroaching in the next div because congratulations is too wide. I suggest sizing down the font for mobile devices. Also, as Waldo suggested, using divs, or better yet, flexbox will alleviate a lot of these issues.

Learn more here: Flexbox | Webflow University

Cheers DFink, I’ll give it a look over and see if I can fix it :slight_smile:

Thanks Waldo, I’ll take a look at see what’s the best way to solve this. Looks baffling at the moment!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.