Streaming live at 10am (PST)

My website page isn't responsible enough on mobile


I have a website page that lists current needs for my organization. These lists are all contained within a container, but the container is only responsive up to a certain point. By that I mean it only shrinks enough to fit on the screen on a tablet. When viewed on a mobile device, it does not fit properly on the screen. Help please!

The page in question on my website is “current needs”

Here is my site Read-Only:

Change max width on that container to 100% on landscape mobile and it will cascade to portrait as well.

TLDW: This is actually an issue with the second row of columns forcing the container off the page. Adjust the flex direction and column options for the smaller breakpoints and it should work as expected. As a side note, I’d recommend replacing the column elements with normal divs, since they really aren’t necessary with flexbox—plus they can cause wonky issue like I mention in the video.

1 Like

Thank you thank you! I knew there was some simple fix I was missing.