Responsive help and missing menu

[Shafee]

Hello,

I’ve been working on my first site for Webflow and would really love some help with proper responsive design structure. I’ve noticed that a lot of elements end up arranged differently when sizing down from the desktop appearance, and I’m just now starting to get that I need to be using auto and percentage adjustments rather than set padding and margins, so I’ve kind of had to double back on some of the areas.

Basically, if anyone has a moment to review each breakpoint and what I may be doing wrong, that would be fantastic! Also, I ran into an issue where adding some animations to my navbar has caused my full desktop site menu to disappear. I’m pretty sure why in that each field is set to 0% opacity via the animation, but I was curious if I could disable the animation on the desktop site as it has no use. For more reference other than my preview mode, here is a published version(you’re able to see embed items, yay).

Very much appreciate your help! This community has been a superbly positive experience so far

---

Here is my public share link: LINK
Here is the published draft link: LINK

[Brando (Brandon Roche)]

First off, killer work for your first site! It looks great!

Second, you’ve got the right idea with the use of percentages. A tip I’ve learned from another Webflower is to use View Height (vh) and View Width (vw) for most of the element sizing. one vh or vw is equal to 1 percent of whatever screen the site is being viewed on. Play around with it a bit!

As far as the positioning goes, you can set an element to an absolute position, instead of using large margins. You can use percentages to set the position as well!

You can disable the animation on one break point but not the others under the settings cog!

Hope this helps! Feel free to pm me if you have any other questions or if I just confused you more!

Cheers!