Skip to content
Submitted about 2 years ago

QR Code Card ( HTML / SASS)

Hamza Masmoudi•180
@HamzaMasmoudi
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

𝗛𝗲𝗹𝗹𝗼 𝘁𝗵𝗲𝗿𝗲 👋, 𝗜'𝗺 𝗛𝗮𝗺𝘇𝗮 𝗮𝗻𝗱 𝘁𝗵𝗶𝘀 𝗶𝘀 𝗺𝘆 𝘀𝗼𝗹𝘂𝘁𝗶𝗼𝗻 𝗳𝗼𝗿 𝘁𝗵𝗲 :

𝗤𝗥 𝗰𝗼𝗱𝗲 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁. 🤖

This is my first challenge on frontendmentor.io after learning the basics of HTML and CSS and I will be doing all the challenges before I start learning Javascript.

I guess it will be a long journey but I m sure i will have fun.

✨ Follow me on my journey on completing all the free HTML/CSS challenges ( 1/26 )

Any suggestions or feedbacks on how I can improve and reduce unnecessary code are welcome! Thanks you 😊🫶

Code

Please log in to post a comment

Log in

Community feedback

  • Aman Singh Bhogal•1,010
    @asbhogal

    Hi Hamza,

    Good job! Just something I noticed, your explicit width is causing the container to scale down and shift to the left when you reduce the viewport. Ideally, you should just set a max-width for parent containers, and a width of 100% to ensure the width of the container only takes up a fixed width, and anything below, it will only take up 100% of it, and avoid setting width values for children containers, instead let them take up the space they need. This will help avoid any overflow problems.

    What you can do is the following:

    • Remove the width: 64rem on the .container and instead apply, for e.g. a max-width: 300px and width: 100%
    • Remove the width: 50% on the .image-text

    Hope this helps!

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