Design comparison
Solution retrospective
Hi everyone! I would like feedback on what I can improve on the site, such as responsiveness and code in general. Thank you very much!
Community feedback
- @SirMeierLinkPosted over 2 years ago
Hello Anderson,
You were able to get your solution to align as close as possible to the design. That's great! I am not able to get that done yet.
After reviewing your solution submitted, I am not seeing the font-family "Outfit" being applied to your p tags. I am seeing the "font-family: Outfit" in the CSS on the p tags, however, I am not see a link in the HTML markup or an import in your CSS file to gain access to Google Fonts. You may also, for best practices, want to include a backup font in the event the font of your choice does not work.
Font-size and padding are needed for your QR code component. The font size for your first p tag needs to be lower and there should be padding to the second p tag to create space away from the bottom.
You may want to lower the opacity of the box-shadow to match closely to the design or remove it entirely to get the desire result.
The sharp corners of the image needs a border-radius to match the container.
One last tip on your submitted solution. For your media query set to max-width: 500px, you can change the margin from 85px 28px 0 28px to margin: 0 auto to make it fit in the center of the screen to avoid it being too far to the left.
Once again you got it to fit close to the design when I use the design comparison slide.
Keep on coding!
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