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

3 Column Preview Component

Philipp 190

@hermi72

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


I struggled to fix the response issue. I built it responsive for mobile devices, but if I shrink it on a desktop, it is not responsive and doesn't look well.

I'm open to recommendations of any kind!

Community feedback

@Channah-Miryam

Posted

Hello,

you could start by creating the mobile version. Mobile first is always recommended.

Then you can use media queries (@media screen and (min-width: 1440px){}) and flexbox or CSS grid to switch directions. You can check how I have done it here: https://github.com/Channah-Miryam/FEM---four-card-feature-section/blob/master/styles.css.

Hope this helps. Kind regards

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