Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR Code - HTML & CSS

AzizFezz 10

@AzizFezz

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'm not sure about my css file and don't know if its responsive

Community feedback

P

@ryanbradley-webdev

Posted

Great work!

At first glance it seems responsive. I looked through your CSS file and it seems pretty good, although there are a couple instances of using flex/grid properties when the display isn't set to either. Not a huge issue, but I could lead to some frustration.

The one thing I noticed when looking at it on a smaller screen is that the footer overlaps the main content. Positioning the footer as absolute can definitely cause this if there's any overflow. An easy fix I've found when the page content is minimal (like this project) is to set the body's display to flex, direction column, min-height 100vh, and then set the main element (or whatever element you want to take up the most space) flex-grow to 1. This should shove everything else to the top or bottom as appropriate.

I hope this helps! Great job on this project!

Marked as helpful

0

AzizFezz 10

@AzizFezz

Posted

@ryanbradley-webdev Thank you for the comment

0

Please log in to post a comment

Log in with GitHub
Discord logo

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