Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Practice designing mobile first and with SCSS!

Rachel 100

@rboz1

Desktop design screenshot for the Agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

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

@Mel1207

Posted

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

@rboz1

Posted

@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
Discord logo

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