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

P
Nick 260

@nn-code80

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


Hey everyone, this is my first project. Any feedback to help me improve my code would be much appreciated. Thanks for the help!

Community feedback

@Mitko90

Posted

Hi there, nice solution.

Maybe if you looked again at your container

.container {
	max-width: 85%;
	background-color: var(--Yellow);
	margin: 200px auto 0;
	align-content: center;
	height: 800px;
}

You don't need the max-width there to be percentage , also get rid of the align-content because it is used for grid containers so it does nothing here. I would also get rid of the height since the card inside will have its own height. The yellow background I would put on the body tag so the whole page will be yellow. Also on the body you can throw

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

This will center your card on the page

Hope I was helpful

Marked as helpful

2

P
Nick 260

@nn-code80

Posted

@Mitko90 Thanks for the Feedback!

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