Design comparison
Solution retrospective
Is there a better way to align the elements in the page without needing to to specify the exact amount of pixels it should be spaced?
Community feedback
- @MelvinAguilarPosted almost 2 years ago
Hello π. Congratulation on successfully completing your first challenge π ! !
I have some recommendations regarding your code that I believe will be of great interest to you.
HTML π·οΈ:
- Use semantic elements such as
<main>
and<footer>
to improve accessibility and organization of your page.
- Since this component involves scanning the QR code, the image is not a decoration, so it must have an
alt
attribute. Thealt
attribute should explain its purpose. e.g.QR code to frontendmentor.io
CSS π¨:
- Instead of using pixels in font-size, use relative units like
em
orrem
. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource π.
- For a responsive and resizable component, consider using
max-width
for the width. Also, setwidth: 100%
for the image to fit the size of the component.
- To center an element vertically, you should use a height to its container and use ``. In this case it is recommended to use "min-height: 100vh" so that it occupies 100% of the viewport height. e.g.:
.biggest-container { min-height: 100vh; display: flex; justify-content: center; align-items: center; } .qr-container { padding: 15px; /* NOTE: Instead of creating a white border, you can use padding to create the space inside the component. */ /* border: medium solid white; */ /* border-width: 20px; */ border-radius: 25px; /* position: relative; */ /* bottom: -150px; */ /* display: flex; */ /* NOTE: Using flexbox here is not strictly necessary*/ /* flex-direction: column; */ /* width: 400px; */ max-width: 400px; /* NOTE: Use max-width instead of width */ text-align: center; background-color: white; .qr-image { width: 100%; /* NOTE: Update the image selector to make responsive images */ border-radius: 25px; } .attribution { text-align: center; position: relative; /* bottom: -370px; */ }
CSS Reset π:
-
You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.
CSS resets that are widely used:
I hope you find it useful! π Above all, the solution you submitted is great!
Happy coding!
0 - Use semantic elements such as
- @Moses2308Posted almost 2 years ago
There are actually multiple ways to center an element.
- You can use flex box to center an element in its flex container. To do that you would need to use the justify-content property and the align items property.
- You can use CSS grid as well to center grid items with place-items : center;
- You can also use margin auto to center horizontally.
If you don't want to center the items, it can be helpful to put all the items you do want to align in a container, and use flex box or grid to work on them
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord