Skip to content
Submitted over 2 years ago

SCSS, CSS, Grid

Wayne Haworth•90
@WayneHaworth
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

Different widths between the image and the text below. Interested to see how others handle it elegantly. I solved this by restricting the width of the text area to 90%, but curious to see how others have done it.

Community feedback

  • Marvin Baga•310
    @mjbagaPosted over 2 years ago

    Hi, Wayne. Great job. The good thing about CSS is there's lots of ways to approach things. I would have probably added padding-inline on your text-container, but reducing width also works well.

    Some feedback, for the image, I tend to not be explicit on the width in pixels, especially when parent width is already defined, just have the image try to follow the parent width with 100%.

    Anyway, nice job. Happy coding.

    Marked as helpful
    1
    Wayne Haworth•90
    @WayneHaworthPosted over 2 years ago

    @mjbaga Thanks Marvin. I think I did use width 100% but got myself mixed up because I had the wrong content-box selected and padding was messing with the sizes of the container. Anyway, I went back and removed the pixel sizes and all is well, thanks again :)

    1

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