Responsive landing page with mobile first workflow

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted about 3 years ago

  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

  @heyitsganyPosted about 3 years ago

  @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

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted about 3 years ago

  @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