centering by absolute positioning and transform, colors as variables

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋, perhaps some of this may interest you:

  HTML, ACCESSIBILITY:

  • Every page should have an <h1> to improve user experience and because it is an important element when it comes to SEO. It is good not to skip heading levels.

  CSS:

  • The page content could be centered using Grid or Flexbox. For example as follows:

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

  • And it is better to use min-height: 100vh; for the body, as using height causes the page to be cut off in viewports with small height (such as mobile landscape orientation).

  I hope you find it useful, any questions do not hesitate 🙂

  Regards,

  Marked as helpful

  0

  ---

  

  colognia•70

  @cologniaPosted over 1 year ago

  @fernandolapaz

  Hi Fer! Thank you so much for your comments! In this task there was no text/headertext which to insert as a <h>-tag right behind the main tag. In this case would you leave the <main> out? What do you do if your page does not start with a headertext ?

  Thank you and hasta luego! ;)

  0

  

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  @colognia

  Hi! this is what I think:

  The easiest thing to do would be to use <h1> instead of the <h3> you used.

  An alternative would be to add a <header> before the <main> with the name of the challenge as <h1> for example (hiding it with CSS). And then use <h2> for the first sentence of the card (it's not good to skip headings).

  Saludos! :)

  0