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

Card Preview Project Built with Basic HTML and CSS

@IsmailCLN

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


In this project, i try to manage responsive design but i couldn't. I will study about this topic. I would love to see any feedback about this.

Community feedback

P
Haydn Kerr 535

@haydnkerr

Posted

Firstly you overall design is great and very close to the design file. the biggest problem I see you have is the width of the container changing with smaller screen sizes. Luckily for this challenge there is no need for a responsive design so I suggest changing the width of the main container to 100% and adding a max-width so it doesn't take up the whole page.

Additionally if you want to use Margin: auto on the container I would add margin: 0 auto then add 100% height and width for the body so the container will sit in the center of the page

happy coding

Marked as helpful

1

@IsmailCLN

Posted

@haydnkerr Thank you for your feedback i will definitely make these changes.

0

@Jojo-onedev

Posted

Hello... I notice that you I noticed that you didn't use the css code in another part. The css code must be written in a style sheet like 'style.css' and linked to the html file. Also to focus your content as the challenge wanted you could do body{ min-heiht: 100vh; display:flex; justify-content:center; align-items:center;} this should do it To make it responsive you can use media queries or flex boxes

Marked as helpful

1

@IsmailCLN

Posted

@Jojo-onedev thank you so much i will make those changes.

1

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