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

Responsive landing page with mobile first workflow

#accessibility#bem#semantic-ui
Jason Heys 175

@heyitsgany

Desktop design screenshot for the Sunnyside agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Fantastic work, Jason! Both your mobile and desktop layouts look great and match up to the design really well. I'd recommend reviewing the large phone and tablet sizes, as the layout looks a little squashed in places and around 560px there's a horizontal scrollbar because the desktop navigation is spilling over the edge of the screen.

Your HTML structure is excellent. Keep up the incredible work! 👍

Marked as helpful

1

Jason Heys 175

@heyitsgany

Posted

@mattstuddert thanks for the feedback, I really appreciate the kind words.

I've fixed the weird horizontal scrollbar "feature". Changing the width of the header from 100vw to 100% on desktop solves the problem. My understanding is that 100vw is adding the vertical scrollbar from the desktop layout and results in the overflow. (Learned something new today!).

I'll definitely take a look at the squashed layout in places, probably work in a hybrid "tablet" query to fix the problem areas.

I also took the time to fix the 2 html issues that were flagged. I added an alt to the decorative arrow image (didn't realise I'd removed it when I used aria-label hidden). I've added a hidden h2 to the bottom images section, as it flagged it as needing one.

Thanks again!

1
P
Matt Studdert 13,611

@mattstuddert

Posted

@heyitsgany, you're welcome! Yeah, making sure projects are fully responsive from mobile through to desktop is great practice and something that would be expected on professional projects 👍

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