My first of project and definitely not my last here, it was a little challenging for a beginner like me. When building the project, I had to go back and grasp the concept of CSS Flexbox and also the concept of viewport height and percentages. My major challenge is finding the best to use between pixels and percentages.
Well done on your first project!
Kindly note that whenever you want to set a width, it is advisable to set a width in % alongside a max-width in px.
Also, avoid setting heights. Instead use padding.
For your fonts, use rems. For your paddings and margins, use ems.
Hope this helps.
Ps. You can check out Kevin Powell’s course on conquering responsiveness.
Ok, i wrapped my head around this and still couldn't get the slim rectangular shape in mobile version, help?...
To get the slim rectangular shape in mobile, don’t just set a width of 90%, you need to add a max-width in px on your .component and on your image.
Kindly note that it is advisable to always start your designs with mobile first.
To adjust your design, try reducing your % and set a max-width for the bigger screen. Hope this helps.
I had difficulty making the card responsive. Would someone please help review my codes and provide feedbacks?
On your qr-card__image, instead of max-width 100%. Do a width of 100% and a max-width of your preferred width in px.
Just note that if you have to set a width, it is advisable you set a width in % and a max-width in px. This will prevent that styled element from expanding past a certain width on larger screens.
