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 using Flexbox and media queries

@mts-ml

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?

Compared to the first challenge I had and idea on how to begin.

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

Although it's a simple project, I got stuck because my font size wouldn't update in resolutions higher than 992px. This happened because I had set the media query rule for my before the default one. CSS reads and applies styles from top to bottom, so if you have conflicting styles, the one defined last will override the previous ones, assuming they have the same specificity.

It took me some time to realize the mistake and fix it, but it was a learning experience.

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

I'm using the following on my CSS:

display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;

to center my content. However, when adding the footer, a scrollbar appears, which I don't like. To address this, I adjusted the min-height to a value that prevents the scrollbar from appearing on larger resolutions. I'd like to know if this approach is recommended or not.

Thanks!

Community feedback

MikDra1 5,950

@MikDra1

Posted

If you want to take a look here is my solution of centering the div.

.container {
display: grid;
place-items: center;
min-height: 100vh;
}

Hope you found this comment helpful 💗

Good job and keep going 😁😊😉

Marked as helpful

0

@mts-ml

Posted

@MikDra1 hey! Will try this on my next project.

Thanks for the feedback.

0
P
beowulf1958 1,170

@beowulf1958

Posted

Congratulations on completing this challenge.

However, it does not look right when you press preview. If you remove the height from the article, then everything looks great.

Also, the width of the h2 should be 100px, not 80px

Hope this helps.

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