Skip to content
OverviewSolutions
13
Comments
2
Michelle Dela Rosa
@mbdelarosa

All comments

  • MonarchRyuzaki•180
    @MonarchRyuzakiSubmitted about 1 year ago

    I usually find it a bit difficult on the following things:

    1. Center/Position stuff.
    2. Setting Height/Width and stuffs of images

    So would want some advice to improve on that Thank you

    QR Code Component Using CSS Flexbox

    3
    Michelle Dela Rosa•180
    @mbdelarosaPosted about 1 year ago

    Hello and good job on finishing the challenge!

    I don't think there's any need to set an explicit height and width on the image -- giving it a max-width: 100% should work so that it takes the width from the parent div card and then use padding to add space between the card's edges and its content. By doing so, the image would adjust accordingly when the screen is resized to a smaller resolution (ex. 320px width for mobile view)

    Setting the img to have max-width: 100% is usually recommended and I believe is also a standard in most modern CSS resets -- a good practice to include one at the start of the styles. I recommend these if you'd like to give them a read:

    • https://www.joshwcomeau.com/css/custom-css-reset/
    • https://andy-bell.co.uk/a-modern-css-reset/

    Hope these help!

    Marked as helpful
    3
  • Michelle Dela Rosa•180
    @mbdelarosaPosted over 1 year ago

    Hello and good job on the solution! Just wanted to provide further suggestions:

    • It is suggested to avoid using IDs as CSS selectors, and instead use classes for styling. This article from FED Mentor really helps explain why
    • It's also suggested to use rem instead of px for font sizing to make the design more accessible and responsive—this is mentioned on a separate article from FED Mentor

    Hope these are helpful! Best of luck!

    Marked as helpful
    0