@vanzasetia
Posted
Hi, Kumar!
For the responsiveness of the card, you only need to set a max-width. The width of the card will increase until the specified value of the max-width.
I recommend moving all the styling of the .background-section to the <body> element. This way, there is no need to add an extra <div>.
In this case, the font size of the text is consistent across screen sizes. So, there is no need to think about making the font size relative to the card's width.
I am not sure about the aspect ratio. But, for the QR code image, add width and height attributes to <img>. This way, browsers will know how much space the images require before they are loaded. As a result, it will prevent the layout shift.
It is important to keep this as simple as possible. No media queries are needed to make the site responsive. Remove unnecessary HTML elements. In this case, you don't need to wrap any element with a <div>.
I hope this helps. Happy coding!
Marked as helpful
@vanzasetia
Posted
@kumarmanglam
One more thing, I don't recommend changing the <html> or the :root font size. It can cause huge accessibility implications for those users with different font sizes or zoom requirements.
Marked as helpful
@kumarmanglam
Posted
I find your feedback and suggested articles very helpful. I will try to implement your suggestions and learn from it. Thanks @vanzasetia,
@vanzasetia
Posted
@kumarmanglam You are welcome!
