Skip to content
Submitted almost 2 years ago

QR Code page

kpb•10
@biggsk81
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi, This was my first attempt at a project on Frontend Mentor. The css stuff has been a little difficult for me, sizing the different elements like the image and the container it is in still learning. Any input/feedback or tips is welcome. Thank you.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Kacper Kwinta•1,405
    @kacperkwinta

    To improve your code and properly size the different elements, you can use the following techniques and best practices:

    1. Use the appropriate sizing units:
    • For the container and other block-level elements, you can use percentage values to make them responsive and adapt to different screen sizes. For example, you can set the width of the container to 90% to make it take up 90% of the available width.
    • For the image, you can use the max-width and max-height properties to make it responsive while maintaining its aspect ratio. This will ensure that the image scales down properly on smaller screens without distorting.
    • You can also consider using viewport-relative units like vw and vh to size elements relative to the viewport size. For example, you can set the height of the container to 80vh to make it take up 80% of the viewport height.
    1. Consider using the box-sizing property:
    • By default, the box-sizing property is set to content-box, which means that the width and height of an element are calculated based on its content, padding, and border. This can sometimes lead to unexpected sizing behavior.
    • To simplify sizing calculations and make your layout more intuitive, you can set the box-sizing property to border-box. This means that the width and height of an element include its content, padding, and border. This can help ensure that the specified dimensions are applied consistently across different elements.
    1. Experiment with different font sizes and spacing:
    • Adjust the font sizes of the headings and paragraphs to achieve the desired visual hierarchy and readability. You can use units like px, em, rem, or even vw for responsive text sizing.
    • Consider adding appropriate line-height and letter-spacing values to improve readability and visual appeal. These properties can be adjusted for different elements based on your design requirements.

    Sources:

    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