@gabrielmorandi
Posted
Hi @krystineeπ, welcome to the Frontend Mentor Community!
I have some suggestions you might consider to improve your code:
-
Some elements of your site are already pre-styled by the browser itself, so to remove these pre-styles and minimize inconsistencies in browsing, a css reset is commonly used, see about that here.
-
After applying the CSS reset, to effectively center your
.qr-component
in the center of the<main>
tag, just apply this to your css:
main {
display: grid;
place-items: center;
height: 100vh;
}
After applying this style, just go to your .qr-component
and remove the margin: 250px auto;
-
To make the contents of your
.qr-component
one below the other, just put in your styleflex-direction: column;
this style will make each child element of the.qr-component
have a width of 100% and placing one below the other. -
Your
@media screen and (max-width: 1200px) {
is causing the white border to only appear on devices that have a width less than or equal to 1200px. -
In this element selection you made in your css
section, .qr-component {
you are selecting all sections and all elements with class .qr-component from your HTML, and you don't want that, you want to style your.qr-component
then select it normally as you did inside your@media
, because if there are other sections in your future projects this will cause style collisions. -
Instead of putting
margin-bottom: .5rem;
in your elements apply thegap: .5rem;
inside your.qr-component
class, doing this way every element inside that class will have exactly the defined distance from one to another. -
And finally use the
<footer>
tag instead of<div class="attribution">
. The<footer>
element contains information about the author of the page and the copyright of the site.
I hope those tips will help you!
Good job, and happy coding! π
@krystinee
Posted
@gabrielmorandi Hi, these helped a lot! Thank you!