Hero section doesn't look right on laptop

Community resources General
1

am working on a site redesign for a friend and I used webflows built in responsive breakpoints as guides. PC, ipad, phone etc and on webflow they look good. I put it live on a dev site and noticed a multiple laptops that there is an issue with the hero section.

Here is the dev site if you want to view it on a laptop but i will provide pics of desktop shot and a laptop screen shot too.

in my limited webdesign knowledge I would think there needs to be another breakpoint forlaptop but not sure

Here is the webflow share link if that is better
https://preview.webflow.com/preview/daniels-fantabulous-project-a0a30c?utm_medium=preview_link&utm_source=designer&utm_content=daniels-fantabulous-project-a0a30c&preview=bfafccd3e42ef2a4fda8216be6addd69&mode=preview

Live site
www.bullygang.com/dev

bullygang_desktop
bullygang_desktop2533×1148 419 KB
bullygang_laptop
bullygang_laptop1883×915 341 KB

2

It looks like you should add a max width property to the hero section so that it doesn’t expand too far. I’d personally opt to put width at 85% and a max width of 1200px. I’d also add 5% margin above and below so that the elements don’t overlap.

Let me know if that helps.

3

thank you so much for the help.