@JNeo77
Posted
Hi there! The solution looks awesome and I like how you structured your HTML. Your use of variables in your CSS was really cool, too!
One thing that could help with the responsive piece is to use a percent value for your .container
width
in the @media
query instead of a hardcoded value like px
. This will make your design fit really well especially on the smaller screen sizes. So you change this:
.container{
width: 320px;
padding: .6rem;
}
To this:
.container{
width: 90%;
padding: .6rem;
}
Sizing the box-shadow (or any element really) could match closer to the design by looking at the measurements in a tool like Figma using the fig file. It's super helpful for this and even border-radius values, dimensions, etc. It's a take a bit to get used to how to inspect the elements but really worth it!
Hope this helps and keep crushing it!
@SandyAstorga
Posted
Thank you very much for the observations, I have made the changes and I feel that I improve to how I was, I still need to improve it more, I learned new things thank you!