@mkboris
Posted
Nice work MarioCampoDev, here are a few things to review
- All content should be wrapped within landmarks. Wrap a
main
tag around the .qrCard and afooter
for the .attribution - To properly center add this to the body and remove the
overflow: hidden;
/* your other styles */
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
- Avoid setting fixed
widths
andheight
on elements, as this can create problems with responsiveness and content fit. Instead, let the content and padding determine the element’s size. If necessary, usemax-width
ormin-height
, and prefer relative units likerem
for better adaptability. Update the .backCardwidth
to usemax-width
and should be defined inrem
. - Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.
- Font-size should be written in
rem
not px. This article explains it better Why font-size must NEVER be in pixels.