Submitted 3 days ago

Responsive article preview component

hkaur108•100

@hkaur108

Preview site View code

This is a solution for...Article preview component

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I learned to use Jquery via this project and next time I will try to dig deeper into Jquery to further improve my skills.

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

I facing alot of troubled with creating the blue bottom for the smaller screen sized but it eventually I was also to solve it by creating two different divs for smaller and wider screens and the styling them differently.

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

Any kind of feedback is useful, it is just that I face alot of trouble with adjusting font size , I think there is something up with the text size setting of my browser because when I make changes in the font size I do not see any differnce hence I do not know how the fonts will appear on others screen.

Community feedback

Saul Gustavo A. S.•630

@saul-gustavoPosted 3 days ago

Hello, I saw your code and it is understandable what you did, but I recommend that you center the body, so that it looks like the design image, to do that you can use the following CSS3 properties.

body {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

.main-container {
width: 100%;
max-width: 600px;
display: flex or grid for 2 sections of card;
}

I also recommend that you see the solutions of other users so that you can see how to solve it or better understand how each CSS3 property works, very good job!

Happy Coding!

Marked as helpful

Please log in to post a comment

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