This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- Solution URL: https://github.com/alkersan/qr-code-component
- Live Site URL: https://alkersan.github.io/qr-code-component/
- Flexbox
- React - JS library
- Styled Components - For CSS
- Vite - Build tool
It was tricky to figure out how to prevent vertical and horizontal content loss on smaller viewports, e.g. less than 320px. Here's the snippet that worked for me:
const Main = styled.main`
...
min-width: fit-content;
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
`;
const CardWrapper = styled.div`
// Don't grow horizontally more than minimally possible to contain the card
// I guess it works because nested image has fixed dimensions
max-width: min-content;
...
img {
display: block;
width: 288px;
height: 288px;
}
`;
The course css-for-js helped me immensely.
- Frontend Mentor - @alkersan