Solution retrospective
The responsive between Desktop and Mobil diveces. This is the worst I wonder how to do it to get two different styles depending on the device selection.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @holdenr505
One thing I'd recommend is changing the unit you're using for your QR container. As it stands you are using a percentage based width that is relative to the parent (body element) container. But when the viewport is resized the body element's width resizes with it, causing the width of the QR container to also change. This causes the text inside the QR container to wrap and increase its height. Try using rem for the width to avoid this while also having your component scale with the font size whenever the user changes it in their browser settings.
- @adie9
If you want to use different styles depending on device/width, you can use CSS Media Queries.
Here's a resource that can help you: https://www.w3schools.com/css/css3_mediaqueries.asp
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