Submitted about 1 year ago

QR Code Component (Solution)

Haikal Yusuf• 30

@waffledood

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

For the qr-code-content container class, i had set a max-width: 550px so that the container class wrapping the h1 & span elements are within the width of the QR code image.

I'm sure this isn't the right way to do this.

Is there a programmatic way or "best practice" way so that the qr-code-content container will be as wide as the QR code image or whatever image that is placed there?

Community feedback

Adonai Jonathan• 290

@ajadonai

Posted about 1 year ago

Your component is way to big when I tried to load it up on my phone, that can be fixed with a media query so on a desktop it takes the 500px you set and on the mobile device it takes up 80-90% of the screen size.

@media screen and (screen width goes here) {

*your class goes here *

}

Marked as helpful

Haikal Yusuf• 30

@waffledood

Posted about 1 year ago

hi @ajadonai , thank you so much for leaving your feedback :) Noted about using media queries, I have refactored the code so that the width of the QR code takes up 30vw & the design is responsive

i will look into possibly using media queries, but i think using vw should suffice

Yusuf K. Muhammad• 570

@kyusufm

Posted 8 months ago

Hi Haikal,

Small notes from me. From the function (the purpose of a card).The card width should not be wider in the desktop or smaller in the phone. I am sure the size of the card is fixed.

let's try the width to 270px.

even if we view it on smaller or biger screen a "card" should be consistent in width.

Haikal Yusuf• 30

@waffledood

Posted 8 months ago

@kyusufm appreciate the feedback, thanks Yusuf!

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