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 with HTML and CSS only

@mellingh

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?

Getting to understand how flexbox works

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

Aligning items

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

I know how to create a media query, but which mobile-specific CSS rules do I need?:

@media screen and (max-width: 375px) { /* Which mobile-specific CSS rules do I need? */ }

Example please.

Community feedback

@dylan-dot-c

Posted

Well done good job.

For this challenge you don't need any media queries, seeing that the design is the same for small and large screens.

Sometimes it's recommended to use mobile first design as it's easier to build from small to large and not large to small

In terms of css rules it depends on what class or I'd or tag you would want to change so maybe the background color is different for smaller screens so you would be like

@media screen and (max-width: 375px) {
    body {
       background-color: #123;
}
}
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