QR Code Component (HTML, CSS) using CSS Reset & Variables
Design comparison
Solution retrospective
Why does the text not align with the same vertical line as the heading in the design?
I checked the dev tools for any margins or paddings but couldn't find any.
What would be an effective approach to resolve this issue? (I believe negative margins might not be an optimal solution.)
Community feedback
- @NelPascualPosted about 1 year ago
Hi @abhishek-pb1, inspecting the component in the browser you can see that the heading and text class, have the same proportion in width.
As the text has been aligned centered, it should be noted that the font size of the heading is larger than the text, so the text is adjusting and there are line breaks when a word no longer fits, so when viewing your component, the text of the paragraph is misaligned with respect to the header.
As @Lo-Deck commented, play with the padding in the text class, to adjust it and the text can be seen more aligned.
Best regards.
Marked as helpful0@abhishek-pb1Posted about 1 year ago@NelPascual
Thanks ! I thought it might be some alignment issue while it was rather a line break issue. Got it.
0 - @Lo-DeckPosted about 1 year ago
Hi well done for this challenge.
I took a look at your code and I guess that you want to have a better align for all lines in the text. You can play with a padding
.text { text-align: center; color: var(--grayish-blue); margin-bottom: 1.2rem; padding: 0 0.5rem 0; }
It fit a little better. Hope to be helpful.
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