@krushnasinnarkar
Posted
Hi @AmandeepGuggi,
Congratulations on successfully completing the challenge!
Your solution looks nice, though there are a couple of things you can improve which I hope will be helpful!
-
Centering the Card: Instead of using margin to align the card to the center, you can use flex or grid properties for better alignment.
body { display: flex; /* OR display: grid; */ justify-content: center; align-items: center; height: 100vh; }
-
Responsive Design: Your card is not responsive below 350px, mostly because of the fixed width of 350px given to
.card
. You can usemax-width: 350px
instead and utilize media queries for better styling..card { max-width: 350px; }
@media (max-width: 350px) { /* Write new styles for screen size smaller than 350px */ }
-
Using Grid: Using grid reduces work and makes it easier to align content and design responsive layouts. Here are a few advantages of using CSS Grid:
- Two-dimensional Layout: Grid allows you to design layouts in both rows and columns, making it more versatile for complex designs.
- Easier Alignment: With properties like
align-items
,justify-items
, andplace-items
, aligning content becomes straightforward. - Flexible Item Placement: Grid makes it simple to place items anywhere within the layout without changing the HTML structure.
- Responsive Design: Using
fr
units,minmax()
, and media queries with Grid makes it easier to create responsive designs.
Given these advantages, it's preferable to use Grid for layout design.
I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.
Feel free to reach out if you have more questions or need further assistance.
Happy coding!
Marked as helpful