Submitted over 2 years ago

QR Code Component Challenge using Media Query for Responsiveness

Lajoc•40

@f-lajoc

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I found it difficult trying to make it responsive on wider screen since I did Mobile-first workflow, I'm not quite sure how effective the media query I used to make it work is....Please spare time to check it out, I'll appreciate Corrections and Feedbacks.

Community feedback

Adam Winzenburger•230
@adamwinzdesignPosted over 2 years ago
Looking at the challenge, it says that the card isn't meant to be responsive. Your deployed site looks fine to me at wider widths, nothing breaks or moves to a location that it isn't supposed to be. What is it about the component that you would like to change at desktop widths?
1
Lajoc•40
@f-lajocPosted over 2 years ago
@adamwinzdesign looking at the design comparison, mine is not centered, it's slightly off-page.
0
Adam Winzenburger•230
@adamwinzdesignPosted over 2 years ago
@f-lajoc You're right, I might have looked at the deployed site rather than the design comparison. I would reduce the margin-top of the .main class. You'll also want to give the img and the text elements their own classes so that they can be resized as necessary at different screen widths. Hope this helps!
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