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
read ECONNRESET
Not Found

Submitted

HTML, CSS (FlexBox)

@stevenCsaunders

Desktop design screenshot for the Project tracking intro component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I am having a small issue with landscape mobile view on iOS devices. There is some extra space on the left and right which also pushes the scrollbar in too far. This is only happening on mobile devices, not in the emulator in chrome dev tools. Any advice would be greatly appreciated!

Thanks,

Steve.

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Hey Steven, awesome work on this challenge. That's odd about the extra space on landscape iOS. The only real way to debug this would be to use the Safari Web Inspector tools while your phone is connected to your computer. Here's an article that shows you how to get set up with Web Inspector. I hope you manage to resolve the issue. This is definitely one of the less fun sides of front-end development! 😂

0

@stevenCsaunders

Posted

@mattstuddert thanks for the link, I'll check it out and see whats up. I have one additional question. Is there a website or service that will check your CSS file for redundant or unnecessary properties? I tried lint, but it gave a bunch of errors on the variables and hsl color properties.

0
P
Matt Studdert 13,611

@mattstuddert

Posted

@stevenCsaunders I would check out Purgecss. You can add it to your build pipeline to strip out unused CSS.

It's actually something that I'd like to add to the reporting at some point to show how much of your CSS is unused.

0

@stevenCsaunders

Posted

Updated css with ITCSS structure, swapped out to SASS and touched up some styles.

0
P
Matt Studdert 13,611

@mattstuddert

Posted

@stevenCsaunders nice work! 👍

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