QR code solution for desktop and mobile using HTML and CSS At-Rule
Design comparison
Solution retrospective
I had difficulties trying to align the text in my div. In the desktop preview images, the distance between the text and the div container is not so much. When I try implementing it to have the same distance, the text changes from 3 lines to 2 lines. I thought the problem was the font size but also I was thinking, a standard font size was already given in the style guide.
Community feedback
- @danielmrz-devPosted 10 months ago
Hello @FaithNA!
Your project looks great!
I noticed that your card is not centered. Here's a very efficient way to place the card in the middle of the page:
- Apply this to the body (in order to work properly, don't use position or margins):
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }
I hope it helps!
Other than that, great job!
Marked as helpful0@FaithNAPosted 10 months ago@danielmrz-dev Thank you for leaving a review. It definitely helps. This is the CSS code I have for the div element:
div{
margin: auto; margin-top: 50px; margin-bottom: 50px; background: hsl(0, 0%, 100%); max-width: 350px; height: 500px; text-align: center; border-radius: 20px;
}
Do I need to remove the margins and max-width here?
0@danielmrz-devPosted 10 months ago@FaithNA
You can remove the margins, but you can leave the max-width
Marked as helpful0 - @LucasW92Posted 10 months ago
Hello!
I've also had problems aligning the text.
As @timodn said, remember to apply the correct font-size and font-weight.
The problem seems to be in your margins, you can control the margin between the bold text and the other with margin-top, margin-bottom, or just margin: top right bottom left (clockwise).
Also, you can set width and height for the h1, p.. that way you can create boxes that you can control.
In your browser, hit F12 to open up the dev tools, the top left button should be a selector tool, use the selector tool to see the margins that are currently being applied.
https://developer.chrome.com/docs/devtools/dom
This should help you to see the margins.
Marked as helpful0@FaithNAPosted 10 months ago@LucasW92 I will try to adjust my margin and set the width and height for the text as you recommend. Thank you! So that will mean that I will have to create a sub-div for them. Thank you for your review.
0 - @TimmyOGHPosted 10 months ago
You should increase the bold text's font size. The standard ones are for normal text sizes only I guess.
Marked as helpful0
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