Qr-Code-Component

For a responsive content use max-width for .container and .card img instead of a width value. reduce the value for it to match closely to the design.

Give p and h1 the same padding left and right values and either give p a margin-top value or h1 a margin-bottom value . please reduce these values e.g:

.card h1, .card p {
 padding: 0 16px; or padding-right:16px; padding-left: 16px}
.card h1{
  margin-bottom: 16px}

Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units watch this https://youtu.be/N5wpD9Ov_To

Hope am helpful HAPPY CODING

Hello 🙌🏻 Your solution looks great however here are a couple of things you can improve which I hope will be helpful! 😎

Make sure to use rem (relative length value) or em units instead of pixels for the purpose of “respecting the user preferences”, to say so. It makes the “sizes” of the website fluid according to the zoom/sizes set by the user.

You can read more about it here: https://www.freecodecamp.org/news/what-is-rem-in-css/

• reduce the width little bit in mobile view.
• or use a fixed width lesser than 375px.