Sudden Misalignment w/Div Block?

hey gang!

i’m relatively new to webflow (but not site design or dev).
I have been working on my new portfolio landing page (www.christianbrescia.com).
this afternoon i got the site looking and working as i wanted, so it was exported and published on another host. :raised_hands:t2:

cut to about 2hrs later…
I was working on another site’s landing page and went back to my other site’s code to copy and paste some elements (like the footer). when I randomly switched into another breakpoint I noticed that suddenly EVERY breakpoint (beyond the desktop) jacked the layout of my hero elements.

i’ve tried closing webflow and re-opening, as well as ticking back thru various backups, but the issue is persistant…even to backups from yesterday when I KNOW the issue was not present. :confounded:

i’ve looked over all my settings, but am not seeing anything that would have caused them to suddenly get adjusted. wondering if (because i’ve been staring at it for so long), i’m just missing something obvious.

the published site does appear as it should, but my webflow work files no longer do. :weary:
scratching my head a bit here…HELP!

thank you!


Here is my site Read-Only: https://preview.webflow.com/preview/christianbrescia?utm_medium=preview_link&utm_source=designer&utm_content=christianbrescia&preview=b18ff88c726890848f4928e674433921&mode=preview

Hi, what hero elements? I’m wondering if you had a conflict that got messed up when copying elements. I can’t see anything wrong with it so if you can provide screenshots or describe whats going on I can try to help.

Thanks for following up! i’m sorry I didn’t respond in a more timely manner.
i’m left to assume that the issue was a fluke (or a temp code bug) because when I inspect the site, now, everything is as it should be.

I hadn’t made any changes (post publish), but noticed the misalignment when I was going to make some design tweaks (for another publish). thanks for your help!

Since I happened to notice it I just wanted to give you a heads up that you’ll want to opt for width: 100% instead of width: 100vw on the .hero-section for both your design and tech linked pages as it’s causing some horizontal overflow.

The vw units don’t take into account your scrollbar width and since both of the sites are slightly taller than my window height I’m seeing a horizontal scrollbar as well. Not a huge issue but something to watch out for.

Other than that, I’m glad to hear the issue didn’t persist :metal:

@mikeyevin!
very helpful advice, thank you!

i’m looking over my code now (https://preview.webflow.com/preview/christianbrescia?utm_medium=preview_link&utm_source=designer&utm_content=christianbrescia&preview=b18ff88c726890848f4928e674433921&mode=preview), but not seeing any of my div elements or sections set to 100vw. have I started happy hour too early??

Haha never too early for happy hour. It was actually on the pages linked when clicking either your design link square or the tech link square, but I don’t see those included when viewing your read-only link.

Those two pages were either were outside of Webflow or have since been removed from your active project. Obviously it’s not the end of the world that there is a bit of overflow, just something to consider as you create projects going forward!

ahh! that makes more sense.
thank you for clarifying. I see it, now!
i’m tweaking all the connected sites/URLs, so will def take your advice and adjust. i’ve been developing HTML since the 90s, but am still trying to get my sea legs with WF.

I appreciate your advice. Thank you!