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

@9rot353

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'm proud of my ability to replicate everything smoothly with ease..

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

I got tripped up when I had to add the font onto the page. Honestly still now completely sure that I did it right. The other thing was the media query for the mobile and desktop screen size. media Quieriy is so confusing to me, but I am proud that I figured out how to make the image adjustable and remembered why it can be helpful to use percentages instead of px definitions for widths and heights.

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

The Media Queries. I'm not sure I did it right. If someone can let me know if I did the font correctly that would also be great.

Community feedback

@Josep-Ocana

Posted

Hi Saivon! I like your project really much!! 😃

In your media query you've wrote:

-(max-width: 375px) : your page changes when the screen is 375px.

-You should set (max-width <= 375px) or with the new syntax: (max <=375px): your page will change with your screen width will be 375px or less.

so your media querie will work perfectly!

0

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