Skip to content
Submitted over 1 year ago

Responsive QR code component with HTML5 & CSS3. Everything vanilla!

semantic-ui, vanilla-extract
Lebogang Phoshoko•10
@PhantomLeii
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Considering it is my first time working on any front-end project the way I did with this one, I think following the design files (*.fig) guide lines when it comes to dimensions is going to have to be one of my religious methods. After being confused by the many, but informative read me files, I am proud of the way I managed to handle this in such less time than I had expected.

What challenges did you encounter, and how did you overcome them?

While working on the mobile display, I realized that the styles I had would not work for those same mobile devices in landscape orientation. finding a way to target the screen widths while not altering the original display on desktops and tablets proved to be troublesome.

Off to StackOverflow I went...

Their answer didn't exactly work for my situation but it got me close enough to figuring out what I had to do. There, initially, @media (max-device-width: 767px) was explained but after modifying, I found that @media (max-device-height: 480px) worked perfectly for my situation.

What specific areas of your project would you like help with?

Not, just with my project but with my knowledge entirely when it comes to working with responsivity. I struggle to understand what to use between max-width: ; and width: ; css rules. The same with the height. And then in addition, I have problems with @media queries and then basic concepts of how @keyframes work.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • P
    Jake Godsall•1,390
    @jakegodsall

    Hi 👋

    Just thought I would share my two cents about the purpose and difference between using width and max-width.

    It is not recommended to provide a fixed-value for the width property of compoents. The reason for this is that at viewport widths less than this value, the content will overflow the visible area of the page.

    A better solution is to use a %-based value, which will be calculated dynamically according to the width of the parent container.

    This means that the component will grow and shrink with the width of the screen.

    Let's say we set width: 90% on the component, then it will grow at 90% of the screen width. This is not ideal at larger viewports, and we therefore want to specify some maximum value so that the component doesn't spread too wide. This is where max-width comes into play. We can set a fixed-value for this property to make sure the component never gets too wide.

    .container {
    width: 90%;
    max-width: 360px;
}

    With respect to height: Generally it's not recommended to set a fixed-value for this property. CSS is dynamic and responsive by default and it will calculate the necessary height of the component according to the content it contains. If we set a fixed-value height, then if the content for some reason becomes larger, it will overflow the component, leading to an ugly user experience.

    I'd recommend leaving the default value of height: auto and using padding or margin on the internal elements of the container to define whitespace within the container.

    Hope this helps 😁

    Marked as helpful

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