Skip to content
Submitted over 1 year ago

CSS and HTML only

Ivy Lariosa•120
@Aibi-Green
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

** What did you find difficult while building the project? **

  • Re-adjusting image size according to parent container size
  • Aligning an html element at the center horizontally and vertically

** Which areas of your code are you unsure of? **

  • The way I handled the image and qr-card div elements. I wanted the QR image to adjust its size according to its parent container and not go out of its borders.

** Do you have any questions about best practices? **

  • I really would like to know if there are better ways or other CSS properties that I could have used to handle the problem I encountered in the problem I stated in the previous question.

Community feedback

  • Gio Cura•650
    @GioCuraPosted over 1 year ago

    Hi 👋 If you want the image to resize according to the size of its parent container, give the image a width: 100%. In your project's case, you'll have to add padding to the sides afterwards. Keep in mind that the card itself must have a set width for this to work.

    As for centering the card, I prefer giving the the html and body a height of 100%, and then setting the body to display: flex, with justify-content: center, and align-items: center. You don't need to set the card as an absolutely positioned item anymore.

    Hope this helps!

    Marked as helpful
    2
    Pipow•500
    @PipouwPieuwPosted over 1 year ago

    @GioCura Hello! This is on point, except I would use min-height: 100vh instead of height: 100% on the body. This way the body is at least as tall as the screen but could get taller if necessary, thus avoiding clipping its content. 😄

    2
    Gio Cura•650
    @GioCuraPosted over 1 year ago

    @PipouwPieuw Thanks! I'll try using min-height on the body from from now on.

    1
    Ivy Lariosa•120
    @Aibi-GreenPosted over 1 year ago

    @GioCura Thanks for the help! I set the image width to 100% and added padding, although that at first didn't work since the image was going beyond the container's borders so I also added the property box-sizing: border-box to prevent the image from doing that and that worked greatly. As for the card, adding display flex, justify-content, and align items really did the job.

    1
    Gio Cura•650
    @GioCuraPosted over 1 year ago

    @Aibi-Green That's good! I forgot to tell you about box-sizing. At the beginning of a project, it's good practice to universally (*) set that to border-box, along with margin: 0 and padding: 0. So, at the top of your stylesheet:

    * {
margin: 0;
padding: 0;
box-sizing: border-box;
}

    You then won't have to manually set it for every element.

    margin: 0 and padding: 0 resets any default spacing values that elements have (ex. <body> has margin: 8px by default). This way, you will be in total control of them.

    Good luck on your next challenges!

    Marked as helpful
    1
    Ivy Lariosa•120
    @Aibi-GreenPosted over 1 year ago

    @GioCura Great advice! I applied this on my current challenge and it definitely is more easier to manage each elements margin and padding.

    0

Please log in to post a comment

Log in with GitHub

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