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 challenge solution using CSS Flexbox

@Rui-Martins23

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


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

Making the final outcome very similar to the challenge's goal.

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

The most difficult was placing the image inside the container. Overcame it by resizing the image, through the image's width.

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

Making the project responsive, to be suitable for desktop and mobile. Felt it's still quite complicated for me at this initial learning stage.

Community feedback

Monica I. 200

@monicaivanov

Posted

Hi, congratulations on finishing your challenge. I understand your frustration placing the image inside of the container, I had the same problem. I used "text-align: center" instead of padding-left and right for your .title and .description classes.

For mobile response I used:

'/Mobile view/

@media (max-width: 375px) { .container {

/here you write how you want your class to appear different, for example by giving another value for width/

}'

Im sure there are better solutions than mine but I hope it will help. Enjoy coding Monica

Marked as helpful

0

@Rui-Martins23

Posted

@monicaivanov It definitely helped Monica. Thank you very much for your feedback! I appreciate the tips regarding the use of text-align property and the sintax for the mobile view.

You too, enjoy coding!

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