Responsive design issues because of way site was laid out

Hi there-

I’m having a ton of trouble figuring out how to fix my website to be responsive across all platform sizes- it looks fine on desktop version but on the all the other screens it is a mess. I’ve watched many Webflow tutorial videos and still cannot figure out why the text, images, and layout are responding the way they are- it is not intuitive to me at all. Your help would be much appreciated!

Also, incase anyone would be willing, I’d be happy to jump on a video call with someone if they think they could help me sort these issues out!

Below is my site preview:


Here is my site Read-Only: Webflow - Chuqlab Project

1 Like

The major thing is that you use a design with a lot of margin and padding. It is way better to use a fixed with and auto margin or change the margin on breakpoints. I would get rid of almost all of the specific margins and try making it with flexbox, fixed width, auto margin, CSS Grid and so many other things. One thing I have found is that columns aren’t really responsive so I use grid instead.
Don’t worry a little margin isn’t bad and having a little white space with margin for sure isn’t but be carefull using a lot of margin espescially on width. This messes up the responsiveness.

thanks so much for the help! Ill see what I can do with that information.