Overlapping sections and responsiveness on mobile (FIXED)

Hi everyone, I’ve hit a new section of my webflow learning curve. I’m trying to make my case study for my Portfolio. So far it seems to be alright on tablets and desktop, but for mobile everything starts to become off center or as far as overlapping on the smaller sizes. I’ve tried looking around on this site for help but my situation might be a bit specific.

First, I have a main features section that seems to crop on mobile, or it gets rid of the picture entirely. I’d like to make it so maybe the text snaps under the photo? (Ill be replacing those placeholder photos with a more square sized gif!

Second, I have a section with four phone gifs showing some features. I would like to have it in a row on my laptop and tablets, but condense down to two columns on landscape and then one column on portrait mode on mobile devices. I’ve tried different ways and they all seem to fall apart on mobile! It also overlaps with my mascot section, and no matter what I do it still overlaps!

Thanks. Here are some images if needed:


EDIT: I’ve figured it out! Sorry, I’m not sure how to close posts.

hi there
you can use flex box for the parent element and
in mobile devices, change the flex direction to vertical.

if you’re new to webflow or flex box this course can help you: