Why does everything get so distorted when I resize? Text overlaps containers, background images dont resize?

Hey Everyone, I’m sorry these are very amateur questions. I want to cry, I’ve been at this for days and have watched every tutorial video and my site is a mess. I don’t understand why nothing resizes properly when I change the window sizing. Suddenly photos will spread apart, background images wont resize, text overlaps sections and containers. I haven’t left my house in three days working on this and I’m about to give up. I am not finding Webflow to be that intuitive.

Any help would be so so much appreciated. Thank you

What I am trying to Achieve

  1. Three images don’t come together like mockup and don’t resize properly. Text overlaps too

  2. Overlapping issue, “crew” text overlaps and doesn’t resize

  3. Background image not resize responsively

Here is my site Read-Only: [Webflow - Diego]

Hi @DiegoChi! I feel your frustration haha. Working with front-end could be stressful lots of times. Anyways, I checked your webflow project. For point #1 of your question; images are not resizing properly because you have custom width and height assigned to each one of them separately. You don’t need separate classes for these images, they are already in a flexbox so all you need to do is set the sizing of the common class .triple-image-section to grow-if-possible like here:
Screenshot 2023-06-14 at 10.34.55 AM

and remove all the custom width and height from their individual classes. That way they’ll equally share the space of their parent flexbox. I did that and this is how it looks on desktop and tablet views:

I hope this solves your problem. Cheers!

Regarding the overlapping text. This is a simple one, you just have the font size set to 125 while the line-height is 20 so whenever the text is in 2 lines they overlap. It’s best practice to set line height as percentage of the font size so you don’t need to worry about it every time you change the font size. You can do this by putting “1-” in the line height input, that means 100%, “1.5-” means 150% and so on :slight_smile:

This is my small contribution to the topic

Hey, I appreciate you so much. Seriously thank you for the help and time. Apologies for the delay. I had to take a few days away from it. lol I have built on site on webflow before and ran into so many issues too. Definitely a learning curve.

I followed your instructions and it worked really well, except I’m not sure if i did it correctly. I removed the individual classes, but i did have to give it a height or it appeared all smushed. Did I do it right?

I have one more question if you dont mind. My menubar doesnt do anything when I click on it. I used the menubar tool and replaced the container for a div so i could move the hamburger menu to the left side, but for whatever reason its not working.

Again, thank you so much for your help. Changing the line height worked like a charm

1 Like

Hi @DiegoChi! Sorry, I just saw this. Really glad I could help :slight_smile: Regarding the height thing, I think you did it right. It never hurts to give it a 100% height to ensure it fills the parent’s container.

Regarding the navbar, I didn’t really get the issue, I also checked your project and it seems to be working. Let me know if you still need help with it.