Skip to content
Submitted over 3 years ago

Practice designing mobile first and with SCSS!

Rachel•100
@rboz1
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Agency landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Question about fitting content to a mobile device: when I load the page on my mobile device it fits to the screen perfectly. But I noticed that I have a small amount of "overhang" that allows for horizontal scrolling of the page. Any ideas how to get rid of this?

Also would appreciate any other feedback, especially resources on how to get the shape of the mobile menu!

Community feedback

  • Mel•225
    @Mel1207Posted over 3 years ago

    Hi Rachel! great work on mobile layout 😀

    here are some issue I found:

    • Layout for desktop (1430px+ and higher): Text and background are not properly aligned based on the mockup you can try check them on your project files.

    • Missing triangular point at the top of your toggle menu. you can check that on google just search css triangle and add it on ::before or ::after of your toggle menu.

    • You can add transition from hovers to make some smooth animations just for UI enhancement.

    1. You can use overflow-x property to hide horizontal scrollbar on your page.

    you can check my [solution] (https://www.frontendmentor.io/solutions/html-sass-and-gsap-for-basic-animations-UBpUkE2Sb#feedback) for reference.

    hope this would help. please upvote my comment if it does, thank you. happy coding 😃

    Marked as helpful
    1
    Rachel•100
    @rboz1Posted over 3 years ago

    @Mel1207 Thank you so much for the feedback!! I didn't even think to design for screens larger than mine!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord