Sunnyside Agency Landing Page

Community feedback

• 

  Ren Ras•420

  @renrasPosted over 2 years ago

  Try wrapping your nav inside a div and apply the positioning on that instead and add overflow: hidden on the nav;

  <main style={{position: relative}}>
   <div style={{position: absolute}}>
    <nav style={{overflow: hidden}}></nav>
   </div>
  </main>
  

  I successfully recreated the animation you're trying implement here in this codepen: https://codepen.io/renras/pen/XWVooXg

  0
• 

  Anna Leigh•5,135

  @brasspetalsPosted over 2 years ago

  Hi, Misiu! Congrats on completing another challenge! 🎉

  To your questions:

  • While I’ve been learning Svelte rather than React, I did find Josh W Comeau’s guide to React file/directory structure helpful.
  • Here's a decent article on Flexbox vs Grid. Personally, I tend to abuse Grid and use it for most things. 😂
  • When it comes to media queries, I try to stick to two “sets” (base styling for mobile, 1 query for tablet, 1 for desktop), but sometimes you’ll have certain elements that need a little extra. 🤷‍♀️ Responsiveness for this one is really tricky, and media queries are definitely needed.
  • For the underline styling on the “learn more” links, I find the best way is to use ::before or ::after pseudo-elements. I see you're already utilized a pseudo-element in your mobile menu, so won't get into full instructions. Although if you have trouble getting it to work, please let me know, and I'll be happy to help you out. 😄

  0