Qr code component using basic CSS

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  Some recommendations regarding your code that could be of interest to you.

  • If you use max-width, the card will be responsive and you can reduce the width a bit
  • You don't need to use margin if you use flexbox in the body

  .qrComponent {
    /* width: 370px; */
    max-width: 300px;
    /* margin-top: 3rem; */
    /* margin-inline: auto; */
  }
  

  • After updating like above, you don't need to use media queries for this solution because the solution will be responsive if you follow the steps above

  Hope I am helpful. :)

  Marked as helpful

  0

  ---

  

  Jonah Ssegawa•240

  @devjhexPosted over 1 year ago

  @ecemgo I appreciate the help and I've just realized that there is that repetition in my code. Making the necessary changes. Thanks a lot.

  1

  

  Jonah Ssegawa•240

  @devjhexPosted over 1 year ago

  @ecemgo

  • I've made the changes needed but if I may ask, then what about the media query I used for the mobile version, how do the media query and the max-width property work together ?

  1

  

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  @Dev-Jhex for this solution, max-width already makes the card responsive. they don't work together. you can delete media queries if you change your solution as I suggest.

  0

  

  Jonah Ssegawa•240

  @devjhexPosted over 1 year ago

  @ecemgo ok so if I remove the media queries, and use the max-width, then how will it adjust to a better width when viewed on a wider screen. Let's say :

  .qrComponent {
        max-width: 300px;
  }
  

  Does it mean I have to increase the max-width value to the widest screen instead, then the property will handle the smaller ones by gradually increasing it where fit?

  0

  

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  @Dev-Jhex You specify a width depending on the widescreen. Let's call it 300px, which is close to the value of the design of the screenshot here. When this is responsive, I mean, this width will get smaller depending on the tablet and mobile screen. Because we define that the "maximum width" is 300px. This value does not increase on larger screens, this value gets smaller as the screen gets smaller.

  Marked as helpful

  0

  

  Jonah Ssegawa•240

  @devjhexPosted over 1 year ago

  @ecemgo I understand you now, so like for projects that are not changing the styles while on desktop or mobile (styles that are staying the same but only the size of the width will change ), it is more reasonable to use max-width or min-width properties instead of having media queries which are more effective and efficient.

  1

  

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  @Dev-Jhex Definitely, I agree with you. Through these features, it is possible to write less code and it becomes efficient. In fact, the less you write code, the more it means you are experienced. :) That's why we need to learn such tricks to improve our frontend dev skills.

  Marked as helpful

  0