Submitted over 1 year ago

QR Code Card

Mudasser Khan•50

@Mdxr

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Everything is looking Good except the shadow color and mobile views under 320px

Community feedback

Ambadi M P•380

@SoaphubPosted over 1 year ago

Hey Mudasser Khan, great work and keep trying for a better responsive website. The website looks good, I can add some suggestions which I am following. You can try it.

I reviewed your index.html page and found the use of an internal style sheet which was fine. But I highly recommend an external style sheet for an easy understanding of CSS hierarchy.
You could media queries for responsive websites. So you can reduce size in different breakpoints and avoid content overflowing out of the screen. You have been using the same size for all screens.
Add all common styles like flex-direction, text alignment etc... below screen size 991.98px where the grid pattern changes. eg: @media (max-width: 991.98px){}. Then for more specific styling like the width of image text use the below breakpoints.

@media (max-width: 575.98px) { ... }
// Small devices (landscape phone)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablet, 768px and up)
@media (min-width: 768px)  and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
@media  (min-width: 992px) and (max-width: 1199.98px) { ... }
// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) and (max-width: 1399.98px) { ... }
// XX-Large devices (large desktops, 1400px and up)
@media (min-width: 1400px)

Hope it was helpful...

Marked as helpful

IryDev•1,580
@IryDevPosted over 1 year ago
Hi @Mdxr 😄. Congratulation on successfully completing your first challenge on the platform ! !

I have some recommendations in order to improve your solution :

Wrap the whole main content of your page into the semantic <main> tag.

Replace the <div class="attribution> by the semantic <footer> tag

Semantic html improve accessibility of your web page

HTML :

<body> <main> <div class="container"> </div> </main> <footer class="attribution"> </footer> </body>

I hope you'll find this helpful! 😄 Above all, the solution your is really good!
Marked as helpful
0

Please log in to post a comment

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