Responsive QR code card using CSS and bootstrap

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

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 the style="width: 18rem" then you would not need the !important for the width: 320px; for the card in your style.css file.

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:

• css_important
• Cascade_and_inheritance

Also i have a few suggestions for you:

• add main tag and wrap the card for Accessibility
• remove position: absolute; top and left properties from card class
• use flexbox to the body for center the card. Read here -> flex guide
• set heigth of body to 100vh because Flexbox aligns to the size of the parent container.

Overall you did well :)

Hope this help and happy coding!

Great job overall man. Keep it up

• To fix your accessibility issues wrap your card with main element.

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 :)