Hi @aazs-edu, congratulations for completing the challenge, the final result is amazing. I would just like to give you a couple of tips to improve your skills.
-
In the body, instead of using height: 100vh; it is preferable to use min-height: 100vh; to center elements.
-
With height you are giving a definitive height to the element, if the content needs more space it will overflow.
-
With min-height you are giving an element a minimum height, if you specify a lower height, the height that the element will have will be the value you assigned to min-height, min-height is not applied when the height is greater than min-height.
-
-
In mobile responsive design there comes a point where the design wants to break, this is because of the width: 340px; you use in your <div class="container"> tag, instead you can use a max-width: 340px; and in the <section> tag add a margin: 0 1rem; and remove the margin: 0 auto; you have in your <div class="container"> tag. This way you will have a better responsive design for mobiles.
CONGRATULATIONS for completing the challenge, keep it up :)
Marked as helpful