@Blackpachamame
Posted
Greetings! you have done a great job š
š Some accessibility and semantics recommendations for your HTML
- To improve the semantics of your HTML, you can change your
<div class="white-box">
to a<main class="white-box">
š Some suggestions
- I recommend doing a small
reset
to the styles that come by default in the browsers. To do this, you can apply a couple of properties to the universal selector*
, with this you will make your site look the same in all browsers - I leave you the task of researching the
reset CSS
and thebox-sizing: border-box
- If you didn't apply the reset, you can add
margin: 0
to yourbody
, this will remove annoying scrolling on large screens. If you want to maintain separation on very small screens, you can apply themargin
again using media querys - You can apply
display: block
to the image to remove the white space generated underneath. Although visually in this case it is irrelevant, it helps you better calculate the space with other elements - Instead of using
margin
to center your content in the center of the screen, you can use theflexbox
properties in thebody
:
body {
background: hsl(212, 45%, 89%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
Marked as helpful