Wassup! 🤙

This is my solution to the QR code component challenge on Frontend Mentor.

Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Leia isso em Português

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

• Solution codes
• Live site

• HTML5
• CSS3

As I'm too young in this world and just started to learn HTML and CSS, the hardest for me to do alone was to actually know where to start. 😅

From my point of view, this challenge is more a CSS challenge than a HTML5 one. My biggest difficulties were about alignment and the interaction between <img> and <div>, as sometimes I was trying to configurate the div's padding and the img popped out of the div.

This was very easy to fix, I simply used the overflow property with the hidden value:

div.window-qr {
  overflow: hidden;
} 

This code hiddes the content that exceeds the div.

I fixed the issue of the img getting off the div, but it still wasn't centered. It kept a left margin and was displaying higher than I wanted. To fix it I setted the img width to 100%.

.window-qr img {
        width: 100%;
}

This made the image occupy only the width of the div.

The last problem I had to solve was how to center my content either horizontally and vertically. This one I really didn't know how to do, but I searched and did found a way that worked. I used the property transform with translate value:

main {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

And I don't really know how this code works, but..

In sum, I think I handled it really good. Well, even if the code isn't the best, the design is pretty close! 🤣

I'll keep looking for ways to center things properly because, as I said, I don't know 100% the usability and function of the transform property. But I do know that it's not ok to use a code without knowing how it works. 🤷‍♂️

• Alignment code source - This is where I found the alignment code with the transform property. The funny thing is that it was posted almost 15 years ago.
• Transform property explanation - This gives you an explanation about the property functions.

Follow me for more "solutions" 😉

• Frontend Mentor - @braga-git
• Instagram - @braga.jpeg
• LinkedIn - Gabriel Braga Camara

Thanks to @chriscoyier for the post about the transform function. I was 6 by that time! 😂