Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog preview card

@SandyAstorga

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I liked how it looked, but I think it would improve the box-shadow and the responsive size ratio.

What challenges did you encounter, and how did you overcome them?

The responsive part, simply.

What specific areas of your project would you like help with?

Community feedback

JNeo77 20

@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!

0

@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!

1

Please log in to post a comment

Log in with GitHub
Discord logo

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