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

Pirate 170

@ima9gh

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 specific areas of your project would you like help with?

Please visit my CSS and tell me my bugs

Community feedback

Akib Raza 900

@akibraza91

Posted

Hi there! 👋

you can give width: 100% to your body to get full width of the viewport below the adjusted code.

you can use @media query for your card to be responsive on small screen.

body{
	background-color: hsl(47, 88%, 63%);
	font-family: Figtree-Medium;
	font-size: 16px;
	min-height: 100vh;
        display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}
@media (max-width: 425px){
        .card {
         width: 90%;
        }
}

Hope this was helpful 🙏

Good luck and happy coding! 🙌

0

Pirate 170

@ima9gh

Posted

Hi @akibraza91 !

Thank you, I will definitely fix it.

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