Submitted 4 months ago

QR Code Component using CSS Flexbox

Aishi Jain• 100

@Aishi-Jain

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud of myself for being able to do this project with very minimal help. I've been struggling with CSS for a while now. I have a hard time figuring out what needs to where. But I'm slowly learning and am hoping to get the hang of it. Next time, I'll probably add more styles and use CSS frameworks once I learn them. I'll also use better media queries for all sorts of devices.

What challenges did you encounter, and how did you overcome them?

I faced a challenge while getting the QR container to the shape given in the design. I had to experiment with the margin and padding values, but after a while i figured it out! I also faced a little difficulty with media queries. I'm still not perfect at it but overtime, I'll be acing it.

What specific areas of your project would you like help with?

I would like help with the media queries. That for me is the most difficult topic in CSS. Not in the way I don't understand it, but I have a difficult time figuring out what values to put for which properties to make the website responsive.

Community feedback

Alex• 3,130

@Alex-Archer-I

Posted 4 months ago

Hi! Good work! You even created your own footer - that's cool =)

The simplest way to figure out where your site need a media breakpoint - to open the dev toolbar, switch it to mobile devices version and just drag the border until your work become broken or ugly. And than write rules for these values.

I recommend you to use percentage for width on the small screens. Something like this: width: 90%; max-width: 375px; This way you'll have a box that stretched on small screens and has a constant size on the large ones.

You can use this approach with the img as well, but don't specify the height value.

By the way, you have decent css rules organization =)

Good luck!

Marked as helpful

Aishi Jain• 100

@Aishi-Jain

Posted 4 months ago

Thank you very much for the detailed review! I'll definitely apply what you said for the media queries in my next project :) @Alex-Archer-I

Alex• 3,130

@Alex-Archer-I

Posted 4 months ago

You're welcome =) @Aishi-Jain

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