Responsive QR code card using CSS and bootstrap

Solution retrospective
Continued development
It would be helpful to understand
-
The reason why some added values in CSS need "!important" to actually show up.
-
How to center any element in the screen regardless of the screen/browser/device used
Please log in to post a comment
Log in with GitHubCommunity feedback
- @grace-snow
I recommend you don't use bootstrap or any other libraries while learning. This will actually hold back your progress.
If you learn css, html and js yourself you'll be able to easily pick up any library you want later on and understand exactly what they're doing, why they're doing it and what the trade offs are in each library.
Good luck
Marked as helpful - @nakoyawilson
Adding to @denielden 's comment, in your index.html file you have inline css on line 26 (
<div class="card" style="width: 18rem">
). If you remove thestyle="width: 18rem"
then you would not need the !important for thewidth: 320px;
for the card in your style.css file.Marked as helpful - @denielden
Hi Mariem, great job! Congratulations on completing the challenge.
- The reason why you sometimes have to use
!important
is because the css is read in cascade and the last classes overwrite the previous ones. It is a good idea to use as little as possible!important
because it makes management of the CSS difficult. - The best way to center the element is to use flexbox
It would be helpful to understand:
Also i have a few suggestions for you:
- add
main
tag and wrap the card for Accessibility - remove
position: absolute; top and left
properties fromcard
class - use flexbox to the body for center the card. Read here -> flex guide
- set
heigth
of body to100vh
because Flexbox aligns to the size of the parent container.
Overall you did well :)
Hope this help and happy coding!
Marked as helpful - The reason why you sometimes have to use
- @EmmanuelHexer
Great job overall man. Keep it up
- To fix your accessibility issues wrap your card with
main
element.
Marked as helpful - To fix your accessibility issues wrap your card with
- @alihuseynzade23
Hi @Mabchir.
It is look like your qr component not well centered. Try to use position: absolute with top and left 50%. Do not forget about translate: rotate too.
Good luck :)
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord