Responsive QR code component with HTML5 & CSS3. Everything vanilla!

Community feedback

• 

  P

  Jake Godsall•1,390

  @jakegodsallPosted 8 months ago

  Hi 👋

  Just thought I would share my two cents about the purpose and difference between using width and max-width.

  It is not recommended to provide a fixed-value for the width property of compoents. The reason for this is that at viewport widths less than this value, the content will overflow the visible area of the page.

  A better solution is to use a %-based value, which will be calculated dynamically according to the width of the parent container.

  This means that the component will grow and shrink with the width of the screen.

  Let's say we set width: 90% on the component, then it will grow at 90% of the screen width. This is not ideal at larger viewports, and we therefore want to specify some maximum value so that the component doesn't spread too wide. This is where max-width comes into play. We can set a fixed-value for this property to make sure the component never gets too wide.

  .container {
      width: 90%;
      max-width: 360px;
  }
  

  With respect to height: Generally it's not recommended to set a fixed-value for this property. CSS is dynamic and responsive by default and it will calculate the necessary height of the component according to the content it contains. If we set a fixed-value height, then if the content for some reason becomes larger, it will overflow the component, leading to an ugly user experience.

  I'd recommend leaving the default value of height: auto and using padding or margin on the internal elements of the container to define whitespace within the container.

  Hope this helps 😁

  Marked as helpful

  0

  ---

  

  Lebogang Phoshoko•10

  @PhantomLeiiPosted 8 months ago

  Thanks @jakegodsall.

  You taught me a lot. I think I need to practice working with percentages more especially considering the fact that front-end deals with lots of images, SVGs and so on. Resizing of pictures and getting them to shrink and expand to different sizes is going to be something that is to happen almost always.

  I got the height tip off from an instagram post a couple years back. I never really mess with the height css rule unless I am in a situation where I need to deal with a static source like an image, video, etc. scrolling down has become nature so I don't think I'll be dealing with something where height needs more of my attention any time soon.

  Thanks again man.

  0