Streaming live at 10am (PST)

Content Not Wrapping

Hello Webflowers!

I have an issue with some content not wanting to wrap at a certain breakpoint. As usual, I’m sure this is an easy fix with a layout or sizing adjustment, but after trying for almost a couple of days now, I’m reaching out for helping hands.

The issue occurs in the mobile landscape breakpoint at around 600px (see below). Before that point, all the content wraps no problem so I checked to see if something had a fixed width, but I did not see that.

This is based on the Landingos template and the issue doesn’t occur there so my assumption was it had something to do with the Tabs I added to this section (because, of course, it’s my fault!). However, after I deleted the Tabs the issue persisted - so maybe it’s the Slider?

Any help would be appreciated! Eager to solve this issue and learn how to avoid it in the future. Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/education-playground-info-site?utm_medium=preview_link&utm_source=dashboard&utm_content=education-playground-info-site&preview=e67a39f7e811709e47ae94beabd4c2f5&mode=preview

Published subdomain: https://education-playground-info-site.webflow.io/test-for-card-overflow

This is actually being caused by your “Grid Sticky Card” element and the default sizing method trying to fit all of the content nicely inside of it:

image

If instead you swap this to Min/Max, the content is able to be “squashed” further and your content starts to behave more like what you’d expect:

image

In your case (since there is only a single column) having a minimum width of 200px works fine, however if you had two or more columns you may need to shrink this number even further.

Hopefully that helps :+1:

Oh gosh. That was an even easier adjustment than I imagined - huge thanks for your help @mikeyevin! I will make sure to review the Webflow lessons regarding Grids and the Min/Max sizing.

1 Like