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

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 😁