qrComponent

Community feedback

• 

  Kamlesh Rajesh Yadav•5,060

  @Kamlesh0007Posted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  I have other recommendations regarding your code that I believe will be of great interest to you. CSS 🎨:

  Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding. We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚. For this demonstration we use css Grid to center the component. body { min-height: 100vh; display: grid; place-items: center; }

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace <div class="main_const"> with the main tag to make the page/content accessible. click here for more on web-accessibility and semantic html

  Give the alt attribute in the img a value. The value of the alt attribute is the description of the image. For decorative images like icons, there is no need to give it an alt value, for more on alt attribute Click here.

  The body has a wrong background-color, give it a background-color of light-gray. Use the colors that were given in the styleguide.md found in the zip folder you downloaded.

  For a responsive content,

  • Replace the width in .main_cost with max-width and the height with a padding value for all the sides max-width: 320px which is 20rem/em padding:16px which is 1rem/em
  • Give the img a max-width of 100% and a border-radius value, the rest are not needed.

  Give h1 and p text-align: center, the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

  To center .main_cost on the page using flexbox or grid instead of margin,

  • USING FLEXBOX: add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body

  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  • USING GRID: add min-height:100vh; display: grid place-items: center to the body

  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here and here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  0