Responsive Clipboard Landing Page

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted over 4 years ago

  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^

  01