QR code component that I designed using HTML, CSS and Media Query

Community feedback

• 

  Mo•840

  @MohamedAridahPosted over 2 years ago

  Hello @HenryAgu, I have some notes for you:

  • the width of the card is quite small try to increase it.

  	.content{
  		max-width: 310px; /* will be better */
                 padding : 18px; /* instead of setting padding-right and padding-left for every element this is shorter and easy to edit from one place */
  	}
  

  • Set font-family Globally instead of declare it for each element like in .write-up h3 and ..write-up p.

  	body {
  		font-family:"Outfit", sans-serif;
  	}
  

  • .content img you gave it a fixed height and this is not best practice because this could corrupt the image resolution. Instead you can use max-width: 100% this means it will take the full width of the its wrapper. In this case padding and margin can be removed

  	.content img{
  		max-width: 100%;
                 border-radius: 15px;
  	}
  

  • .content img you used align-self and this property will be Useless because you didn't use display: flex for the image.

  • let .write-up take the full width of the card and padding we set previously for .content will make the space design required. In this case padding-left you set can be removed.

  • remove negative margin for .write-up h3 and padding also because it makes a big space in the bottom

  • try to increase the font-size for both .write-up h3 and .write-up p

  ** For fixing Accessibility issues:** - use main element as wrapper for the .content element. - use <h1> heading level instead <h3> heading level in the .write-up

  • you can see My solution for this challenge it may be useful for you.!

  I hope this wasn't too long for you, hoping also it was useful😍.

  Goodbye and have a nice day.

  Keep coding🚀

  0

  ---

  

  Henry Agu•240

  @HenryAguPosted over 2 years ago

  @MohamedAridah Thanks so much

  0

  

  Mo•840

  @MohamedAridahPosted over 2 years ago

  @HenryAgu

  You are welcome👍🌹

  0