Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

SCSS, CSS, Grid

@WayneHaworth

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@mjbaga

Posted

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

@WayneHaworth

Posted

@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
Discord logo

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