a responsive qr code component using html and css

Community feedback

• 

  P

  M Kerr•1,040

  @mkerr-githubPosted 7 days ago

  Great efford, looks good!

  To get it to fully display in the center, you can do :

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  

  and to keep the "challenge by" out of the way at the bottom of the screen some people used

  position: absolute;
  bottom: 1rem;
  text-align: center;
  

  The next challenge on the learning path helps to learn about how to make such a card more responsive, and they show two layouts, desktop and mobile.

  https://www.frontendmentor.io/challenges/blog-preview-card-ckPaj01IcS

  Basically, you can use media queries, where you can specify in the CSS that certain properties and sizes should change once the pixel size of the screen reaches a certain size. Watch a few short tutorials on CSS and media queries.

  Here is a nice short explanation as well on W3 schools:

  https://www.w3schools.com/css/css_rwd_mediaqueries.asp

  For responsive purposes the convention is to convert these measurements to "rem", to do so divide them by 16 (as the base rem is 16px, and 16px is set by most users as the default on browsers.).

  Then use max-width to set the large size and min-width to set the small size.

  The convention is to use rem and sometimes em, instead of pixels for most items, as they are more responsive.

  Pixels can still be used for small elements like icons and buttons where you do not want the size to change even on small screens.

  More details here: https://austingil.com/px-or-rem-in-css/#:~:text=Pixels%20are%20an%20absolute%20unit,the%20equivalent%20of%2024%20pixels.

  If you found anything in this comment helpful, please remember to click the "mark as helpful" button. Thank you!

  Keep up the good work, and keep going! 👋

  Marked as helpful

  0

  ---

  

  william nyaranga•30

  @William-nyarashPosted 7 days ago

  @mkerr-github Thank you for the insight and the links to other resources I've really learnt alot.

  1