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

QRCode Responsive Site

Darren 120

@DarrenBerg1

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


A few questions I have, for things that I found difficult.

What was the best way that you found, to center the QR code? How did you make your webpage responsive?

Community feedback

@Brian-Pob

Posted

Hi Darren! Have a look at my solution to this challenge.

To answer your questions, I centered the QR Code using display: grid to center my solution. Another way is to use display: flex though I can see that's what you used for your solution. Either way is valid.

For responsiveness, you might want to look into media queries. They are essentially blocks of styles that execute when the screen is at, above, or below a set screen size. Although I don't think you need to worry about that for now since you're dealing with a small component.

Marked as helpful

2

Darren 120

@DarrenBerg1

Posted

@Brian-Pob Thank you for the reply! I definitely need to get more comfortable with media queries.. That was a tough one to figure out and also centering the QR code lol.

1

@Brian-Pob

Posted

@DarrenBerg1 You are welcome! If you would like some resources for learning media queries, I would highly recommend Kevin Powell's YouTube channel. He has a ton of awesome videos on CSS and general front-end work. In fact, he has a great video on how to make responsive design a bit easier.

Keep up the good work! 👊

0

@Stack-Mm

Posted

to center the QR code i use display:flex; justify-content:center; //Center the code vertically align-items: center; //Centle the code horizontally

to make the page responsive I did it by using Media Queries :D

1

Darren 120

@DarrenBerg1

Posted

@Stack-Mm Thank you for the feedback!

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