Submitted 4 months ago

QR Code challenge solution using CSS Flexbox

Rui-Martins23•190

@Rui-Martins23

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

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
@monicaivanovPosted 4 months ago
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•190
@Rui-Martins23Posted 4 months ago
@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

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