Desktop second solution using CSS and HTML

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace <div class="box-2"> with the main tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

  There is no need to style box-2, give the background-color you gave to .box-2 to the body.

  To center .box-1 on the page using flexbox or grid instead of margin, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

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

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

  For a responsive content, replace the width in .box-1 with max-width and give the img a max-width of 100%.

  Replace the height in .card with a padding value for all the sides, this will prevent the content from overflowing on smaller screens and its a responsive replacement. padding:16px.

  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.

  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

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0

  ---

  

  Feithers•180

  @FeithersPosted over 1 year ago

  @Hassiai Hey there! Thanks for the help, I tried to fix it, I still have a few specific questions now that i'll copy/paste from the questions above. 1- What does exactly the "min-height" do? I know that it's purpose is to put it on the middle of the page, but isn't that the job of the "align-items" property? Also what exactly is "hv" on "100hv". What kind of measurement is that? 2- The solution I gave still has the words in a different size than the challenge, even tho I've used the exactly same font size and weight, why is that?

  Thanks!

  0
• 

  Francisco Carrillo•5,540

  @frank-itachiPosted over 1 year ago

  Hello there 👋. You did a good job!

  I have some suggestions about your code that might interest you.

  HTML 📄:

  • Wrap the page's whole main content in the <main> tag.

  CSS🎨:

  You can use grid or flexbox to center the content no matter the viewport size. Using grid you can do the following:

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

  With flex:

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

  • Avoid using absolute length units px, especially for font-size and width properties, because they are not relative to anything else so that means they will always be the same size. Instead, you can use relative lengths like em or rem. The benefit of that last one is element which has that unit will scale relatively to everything else within the page, e.g., the parent container. You can dig up about it here

  I hope you find it useful! 😁😁 Above all, the solution you submitted is great👌!

  Happy <coding /> 😎!

  Marked as helpful

  0