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 Clipboard Landing Page

Anil 150

@willinglywill

Desktop design screenshot for the Clipboard landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Amazing!

Community feedback

@pikapikamart

Posted

Hey, great job on this. The layout looks fine in desktop and in mobile it seems good as well, but there is this horizontal scroll which we want to avoid.

Some suggestions would be:

  1. Making the font-text color more visible. Right now it is sort of gray-ish which is not really being contrasted well enough of the white background. Making it more darker will really help people to read it clearly.

  2. I think your breakpoint is too far, you set the desktop only for min-width: 1440px, this makes a bit lower of that, then they get the mobile version which is really too soon. You could either lower it down so that we will get desktop layout at those desktop points.

  3. Your footer logo gets overlapped by its sibling, it will be better if you removed the margin-left on the footer-navs selector to prevent that. To achieve that spaced out layout on the footer, you could just add both the footer-logo and footer-navs into one block, then make it flex. That way they will be side-by-side and more easy to handle. Also make the max-width of the footer-logo image itself a fixed and not 100%, since it is a flex-container, width of element varies according to space left.

  4. Also, those footer links should be wrapped inside a tags, links and social media links.

  5. Mobile layout needs to be refactored. Right now that is causing the horizontal scroll, looking at it, I think you forgot to declare some on it.

  6. Too many h1 elements, we want to avoid overusing h1 in a single page, you could just either use h2 on those. Making a habit of only using h1 per page will be really awesome.

But still, good work on this one^

0

Anil 150

@willinglywill

Posted

@pikamart Hey! thank you very much for such a detailed and helpful comment. I will actually start and fix those issues which you mentioned before I start a new project.

Some of the mistakes I even didn't realize and I say " oh boy! i really do that -_- " . It really helps me to develop, thank you again.

All the best!

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