HTML and CSS

Community feedback

• 

  Kamlesh Rajesh Yadav•5,040

  @Kamlesh0007

  Posted about 2 years 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; }

  00

  Marked as helpful
• 

  Hassia Issah•50,410

  @Hassiai

  Posted about 2 years ago

  Replace <div class="codigo_qr"> with the main tag, <p id="p"> with <h1> and <div class="attribution"> with footer tag to make the content/page accessible. click here for more on web-accessibility and semantic html

  Every html must have <h1> to make it accessible. Always begin the heading of the html with <h1> tag wrap the sub-heading of <h1> in <h2> tag, wrap the sub-heading of <h2> in <h3> this continues until <h6>, never skip a level of a heading.

  To center .codigo-qr 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

  For a responsive content which wont require a media query for this challenge,

  • Give .codigo-qr a fixed max-width value and 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 the same font-size of 15px which is 0.9375rem, text-align: center,the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  01

  Marked as helpful
• 

  osiz00•420

  @osiz00

  Posted about 2 years ago

  nice design Jennyfer17’, about making it responsive you can try using more fluid units such as img {width:90%;}, use less px units because it tends to make the site dimensions fixed but with % dimensions of the site change with the width of the screen, also i recommened to make a div for the image and give it a width of 100%, then for the image {margin: 10px auto}, to center it horizentally, for making the website even more responsive you can use media quaries, youtube is full about media quaries lessons, i hope that i was helpful.

  01

  Marked as helpful