Design comparison
Solution retrospective
The paragraph text stretches out the padding which doesn't look right. I'm trying to figure out how to keep the left and right margins of the paragraph text with the QR code image.
Community feedback
- @bccpadgePosted about 1 year ago
Hello @breteo. Welcome to Frontend Mentor Community 🎉!!!
I have few suggestions to improve your solution.
HTML 📃:
- Every website should have at least one landmark like a
<main>
tag so you can wrap all the content in a<main>
tag
HEADING TAGS
- Every website should have one heading tag like a
<h1>
- Add this code:
<h1>Improve your front-end skills by building projects<h1>
CSS 🎨:
- You need to add CSS Reset to your stylesheet
Here are few CSS Reset you might want to check out:
To fix your issue, you can remove the default margin and padding using the * selector
*{ margin: 0; padding: 0; box-sizing: border-box }
On your container class you need to remove a few styles and some new ones
margin: 0 auto;
andmargin-inline: auto
do the same thing so you can remove whichever one you want- Add a
max-width
so your card won't stretch the whole width of the page
.container { background-color: #fff; border-radius: 17px; margin: 0 auto; margin-inline: auto; }
.container{ background-color: #fff; border-radius: 17px; max-width: /*whatever value you want */ margin-inline: auto; }
Here is my solution to this challenge qr code component in case you want to look at it
Hopes this help you and don't hesitate to reach out to me if you have any questions
Marked as helpful1 - Every website should have at least one landmark like a
- @gabprojectsPosted about 1 year ago
In my qr code, a padding on "imgBox" and a side margin on "p1" worked fine.
1 - @HollowZllPosted about 1 year ago
Try using margin-left, margin right. Not sure if that's the answer you're looking for, since I see js files and variables in your github page for this project. Either way good luck, I find this challenge more about the css, it's an interesting take to use JS.
1
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