Submitted about 1 month ago

Responsive QR Code card using Flexbox

py-code314• 290

@py-code314

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 was able to make good use of Flexbox to center the card and make it responsive

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

I wrapped card image, title and text in individual divs. Is it advisable to do it this way or is there a better way to do it?
Tried to use BEM nomenclature for class names. Please let me know if I made any mistakes!
Little confused about the use cases of margins and padding. Is there any good resource out there which explains their proper use?
Any alternatives to media queries so that I don't have to write them for every screen size?

Community feedback

AlvaroPrates• 110

@AlvaroPrates

Posted about 1 month ago

I'm fairly new to web-development, but I think I can leave a little feedback.

When I've done this project, I forgot to add the box-sizing: border-box CSS property and had some trouble to adjust the width. So, nice catch implementing it!

Regarding the topics that you need help:

Instead of wrapping the image, title and text within normal divs, maybe you can use the <article> and/or <figure> HTML semantic tags.
I didn't use any media queries to this project. Do you really need any?

Marked as helpful

py-code314• 290

@py-code314

Posted about 1 month ago

Thank you. I've changed the <div> to <article> as it makes more sense semantically.

I've noticed in the figma file that title text has 'Drop shadow' in Desktop version and the Mobile version doesn't. That's why I had to add @media in there

Afeni Samuel Oluwatimilehin• 10

@TimTech5

Posted about 1 month ago

Basic ui design with the use of HTML5 syntax , it is responsive and the layout looks good on a range of screen sizes

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