@Blackpachamame
Posted
Good job!
Here are some comments that may help you:
- Use semantic tags such as
main
,footer
, etc, this helps the accessibility and SEO of the site - The
<div class="main">
should be<main class="main">
- The
<div class="attribution">
should be<footer class="attribution">
. Place the footer outside the main - With these changes, the current main is no longer necessary
- To center the elements in the center of the screen you can make the following adjustments in the
body
:
body {
font-family: 'Outfit', sans-serif;
background-color: hsl(212, 45%, 89%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column; /* Place one element below the other */
gap: 20px;
font-size: 15px;
}
.container {
max-width: 360px;
/* margin: 0 auto; You no longer need to add margin to your main*/
}
- Apply
display: block
to the image to remove that annoying white space - To center the content you can also use
display: grid
+place-content: center
+min-height: 100vh
. Or you can use themargin: 0 auto
, but the best and easiest way is with flex or grid - The
align-items: center
, centers the content on the vertical axis, to center it horizontally, you should usejustify-content: center
. All this withflex-direction: row
. If you had aflex-direction: column
, it would be the opposite.
@AdeMEDIA
Posted
Thanks man @Blackpachamame