@BilalSalmi
Posted
Hi Gilbert, well done!
Your design is already responssive, all you need to do to optimize it is to modify the div with class named ".card-wrapper". it will be prefectly centered!
.card-wrapper { background: var(--white); border-radius: 10px; display: grid; grid-template-rows: 1fr 2fr; grid-template-columns: 1fr; width: 344px; height: 600px; margin: auto; margin-top: 10px; margin-bottom: 20px; /* margin: 30px 15px 10px 15px; */ }
you forget to set margin to "auto".
To fix your Accessibility report issues consider to read more about the following topic which is as follows:
- Html semantic elements click
That is, Keep going!
Marked as helpful
@gbtan1991
Posted
@BilalSalmi Thank you for your guide. Now it's centered on every type of device. Also, the Accessibility report was done I've changed some div to semantic tags. Thanks again
@BilalSalmi
Posted
@gbtan1991 No at all ! I'm happy to see the result .
You may wanna dig deeper into responsiveness & alignment:
