Streaming live at 10am (PST)

Hiding Extra Image From Viewport Width and Browser Differences

Hi,

Hoping to get some help on the way my website behaves on smaller breakpoints, and some differences I’ve found in Chrome vs. Safari. I’ve watched all the Webflow University tutorials so I apologise if I’ve missed something, it’s my first time using Webflow.

I have some SVG “wave” backgrounds I have added behind each section on my home page. They are quite wide, so on smaller breakpoints I have just increased the Max Width % of each SVG so they stretch and increase in height (more zoomed in). However, when I am on mobile it expands the full width (I want it to not show the over-spilling content). It starts in the correct position, but it is able to be zoomed out (I’ll attach screenshots so you can visualise).


I’ll also share my link below so you can check the settings.

Additionally, I’ve put an illustration in the second section and I’ve got it and some text in a div block set to flex layout. Is this best practice? It looks great on Chrome, but in Safari it’s behaving unexpectedly where the illustration is offset further down.


Share link: https://preview.webflow.com/preview/maddyhills?utm_medium=preview_link&utm_source=designer&utm_content=maddyhills&preview=451307137e2ad0af8f68e6679f1f17f2&mode=preview
Published site: www.maddyhills.com

I really appreciate any advice you can share!

  • Maddy