Basic HTML and CSS. Position absolute and relative

Community feedback

• 

  Vincent Daniel•410

  @davinceeyPosted about 2 years ago

  Hello marcinsmok. Congratulations on your first project! It is well-designed overall. Just a little tip. You can wrap your div container around with a <main> semantic tag. You could also use a <section> or <article> tag to wrap your <h1> and <p> elements. All these are to help improve in your Accessibility Report when using the SEO.

  Hope this helps you. Happy Coding!❤️

  Marked as helpful

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @marcinsmok, Congratulations on completing this challenge!

  Great solution and great start! By what I saw you’re on the right track. I’ve few suggestions to you that you can consider to add to your code:

  1.Use <main> instead of <div> to wrap the card container. This way you show that this is the main block of content and also replace the div with a semantic tag.

  2.Use units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but to all sizes as well.

  3.The approach you've used to center this card vertically is not the best way, because using margins you don't have much control over the component when it scales. My suggestion is that you do this alignment with flexbox using the body as a reference for the container.The first thing you need to do is to remove the margins used to align it, then apply min-height: 100vh to make the body height size becomes 100% of the screen height, this way you make sure that whatever the situation the child element (the container) align the body with display: flex and align-items: center / justify-items: center.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  marcinsmok•110

  @marcinsmokPosted about 2 years ago

  @correlucas Thank you for your advices and help.

  I tried use that flexbox centering in other challenge but justify-items doesn't work. I found info that is only for a grid and in flexbox works only justify-content. Is that right or is it possible use it in flexbox somehow? Maybe i just misunderstood that concept and tried use it in wrong way?

  Cheers :)

  0

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @marcinsmok can you point me the challenge or the repository this way I check for you?

  0

  

  marcinsmok•110

  @marcinsmokPosted about 2 years ago

  @correlucas https://github.com/marcinsmok/stats-preview-card-frontendmentor-challenge4

  Now it looks ok - don't look on overall css I just tried center container. When I change justify-content on justify-items is like that: https://prnt.sc/Gyl25mS9fodG

  0

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @marcinsmok I added justify-content: center; and centered normally. Try that and say me if work for you too

  0

  

  marcinsmok•110

  @marcinsmokPosted about 2 years ago

  @correlucas That works for me too.

  I just according to your first comment:

  My suggestion is that you do this alignment with flexbox using the body as a reference for the container.The first thing you need to do is to remove the margins used to align it, then apply min-height: 100vh to make the body height size becomes 100% of the screen height, this way you make sure that whatever the situation the child element (the container) align the body with display: flex and align-items: center / justify-items: center.

  justify-content: center works fine but justify-items: center for flexbox doesn't ;)

  EDIT: Sorry I don't know how properly format text here still.

  0

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @marcinsmok Ah okay! Sorry I did a mistake with the properties. You're right. My bad.

  1