Responsive Stacking Cards & Floating Nav Issue

Hey Webflowers!

Hoping someone might be able to help with two issues I’ve been battling with regarding a site build.

  1. The Navigation Button.
    On desktop, I would love to keep the nav-button fixed in the upper-left corner of the page, however, having used em for the margins—the button glides around the page when the browser is expanded past the width of the container. It seems to be affected by the width of the overall viewport, despite being contained. Is there something else I can consider? I would also like to switch it’s position to be on the lower-right corner on tablet and mobile devices, so I would plan to invert the solution to move that button around.

wb-forum-help

  1. Stacking, Sticky Cards.
    I have been trying to define heights and values for this stacking card effect to be as responsive to the browser as possible — however, I’ve found using minimum heights contract the content without a static height set. I’ve recently set everything to auto, but when the browser viewport is reduced vertically, the content ends up overflowing — making it very hard to read. Are there any recommendations on building off this effect to respect the contents and spacing in relation to the viewport?

Note: card 1.2 has a slider that contracts its height on the published site but there is still an issue of having the top of the card remain in view. If you’re looking at the designer view and seeing that this one particular section is sticking out; it’s not as long as it is in the designer.

Thank you in advance for any insights you might be able to provide. :slight_smile:


Here is my site Read-Only: Webflow - One Larchmont