Responsive web design with flexbox and media queries

Community feedback

• 

  P

  Øystein Håberg•13,100

  @Islandstone89Posted 5 months ago

  Hey, well done finishing this first challenge!

  Here are my suggestions for an even better solution :)

  HTML:

  • The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

  • Wrap the footer text in a <p>.

  CSS:

  • Including a CSS Reset at the top is good practice.

  • box-sizing: border-box; should be set on all elements using the universal selector:

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  

  Since it's now set on all elements, you should remove it anywhere else..

  • It's not common to set styles on html, so move those properties to the body.

  • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

  • On the body, change height to min-height: 100svh - this way, the content will not get cut off if it grows beneath the viewport. Remove height: 100%. Add gap: 2rem, this creates breathing room between the <main> and the <footer>.

  • font-size on .attribution must also be in rem. Here is why you must never use px for font-size.

  • Since all of the text should be centered, you only need to set text-align: center on the body, and remove it elsewhere. The children will inherit the value.

  • On the image, add height: auto, display: block and max-width: 100% - the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container.

  0

  ---

  

  P

  cookie-monster01•220

  @cookie-monster01Posted 5 months ago

  @Islandstone89 Thank you for detailed feedback. I had done this project a few days ago, and I'm practicing both newbie and junior projects, hence i submitted my old project in my learning path, so i could access the next newbie project.

  But could i request a feedback on the latest project I did. Here's the link for the same: https://www.frontendmentor.io/solutions/fylo-two-column-layout-using-grid-and-flexbox-V_8Opg3pg4

  I could also use your help in understanding:

  • how to add custom message alert on email input (Please note I haven't yet learnt about sass variables.

  • how to change the fill color of svg icons on hover.

  Thank you! :)

  1

  

  P

  Øystein Håberg•13,100

  @Islandstone89Posted 5 months ago

  @cookie-monster01 Sure, I'll take a look at it tomorrow :)

  0

  

  P

  cookie-monster01•220

  @cookie-monster01Posted 5 months ago

  @Islandstone89 That would be super helpful :)

  1