Design comparison
Solution retrospective
I found it difficult trying to figure out how to center the card that holds the QR Code in the center of the vertical axis.
Community feedback
- @frank-itachiPosted almost 2 years ago
Hello there 👋. You did a good job!
I have some suggestions about your code that might interest you.
HTML 📄:
- Wrap the page's whole main content in the
<main>tag. - If your code has different sections that have a specific like a , , sections or footer, it’s a good practice to enclose those parts with HTML5 landmarks.
For example, you could use a
<footer>tag to wrap a footer section. - The heading order is important in the html structure so try to always start your headings and/or titles with an
<h1>tag and then you can decrease by one if you need to use more headings in your html code.
CSS🎨:
You can use grid or flexbox to center the content no matter the viewport size. Since I use grid to achieve such purpose, you can do the following:
body { min-height: 100vh; display: grid; align-items: center; justify-content: center; }As I said, you can use flexbox to center the content and it will work as well.
body { min-height: 100vh; display: flex; align-items: center; justify-content: center; }I hope you find it useful! 😁😁 Above all, the solution you submitted is great👌!
Happy
<coding />😎!0 - Wrap the page's whole main content in the
- @GhraviteePosted almost 2 years ago
Hello Anthony!!, congrats on completing this challenge. Here are some tips to make your code better.
-
To center your card horizontally and vertically, you need to wrap all your contents in a container, preferrably a div with the class name card or whatever works for you. You can then simply make use of flexbox on it's direct parent which in your case will be the <body>. Your code will look like so:
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; // This will make your card sit in the middle of your viewport without vertical scrolling. padding: 3rem 2rem; // Add padding on it's direct parent to avoid your container from touching the top, bottom and sides of the screen for mobile view. } -
Your card should equally contain two divs: one for the image and another for the text i.e card-image and card-text respectively. You can then use flexbox to arrange them like so:
.card { display: flex; flex-direction: column; } -
Try to add classes as much as possible. The specificity will make your life easier as a frontend developer.
-
Developers seldom use tags like strong. Make use of the header tags like <h1>, <h2> and the likes and add appropriate font-size and font-weights with their colors. Your code must contain at least one of these in the right order.
-
Always apply this reset for images:
img { display: block; max-width: 100%; }This will keep your image inside its container at full width. Look up other css resets and apply them. Here's one: css resets -
Please pay attention to the accessibility and validation reports on frontend mentor.
I hope you find this helpful. Happy coding.
0 -
Please log in to post a comment
Log in with GitHub
Join 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