REsponsive Landing Page

Community feedback

• 

  P

  Tom Winskell•130

  @tomwinskellPosted 29 days ago

  🤩🤩 Nice work! Your solution looks awesome. 🤩🤩

  • Responsive.
  • Different layouts as per the design for desktop, tablet and mobile.
  • Colours, fonts, spacing and buttons are spot on.

  🤔 Here's something to consider. I hope my explanation is clear. Sorry if you already know this.

  • Your reset may of actually caused you some difficulty when applying the styles you wanted. For example, on the design the header or hero image is full width and actually the page.
  • Your reset provides every image with the css property: max-width: 100%. However, for your hero image you ideally want it to be width: 110vw or similar.
  • It would be difficult to apply this custom style with your current setup.

  Why?

  • Ideally a css reset should be linked before your custom css styles. Css is a cascade meaning that properties lower in the stylesheet override those above. That's why media queries for breakpoints typically go at the bottom of the stylesheet.
  • There's a good explanation by Shay Howe here.
  • Your link in index.html to the reset is below your custom stylesheet. I'd switch it around or even @import the reset at the top of your custom stylesheet. See here.

  0