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

HTML and CSS using Flexbox

@memerald

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


The mobile site isn't completely responsive and would like some feedback as to what can be improved

Community feedback

@pikapikamart

Posted

Hey, great work on this one. The layout in desktop and mobile is both good. When resizing, I like how you wrap the card in the bottom, but those border-radius sticks out right.

The only thing that I would greatly suggest is that, removing the height: 100% in your body tag. Because this limits the body's height, only to 100% of its parent, hence, we are referring now to the viewport or the screen. So when looking in dev tools, your layout is don't have any spacing that prevents them from touching the ceiling and flooring. So removing that will be awesome, and while you're at it, add a padding to the top and bottom of the body tag.

You did a good job on this one^^

1

@samuelfuchs

Posted

Hey Lakshya Bhatia,

I like what you did with the rem on the title font sizes.

I am having great results putting in a margin of 5% on the card-container (in the media queries for responsiveness).

I hope it helps.

Cheers from Brazil

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