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

Responsive with Bootstrap and CSS/HTML

Enis Kerti 590

@eniskrt

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'll be waiting for your recommendations...⌨️

Community feedback

@matiasluduena23

Posted

Hi Enis Kerti. Good work! Just one thing that might help you.

  • to make you responsiveness more fluid add the dislplay flex configuration on the mobile mode. And remove everything from your media query
card-group {
display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

There is something that don't allow your cards being flexible but I couldn't figure out.

Good code!!!

Matias

0

Enis Kerti 590

@eniskrt

Posted

@matiasluduena23 Thanks for your suggestions. I tried what you said and I experience some other problem about first card layout. Gnerally I use bootstrap in this project. Though I've used media-querry, I thought I didn't experience any problem in responsive except that margin bottom in responsive design. What do you think about media querry or not? Good code to you too. Thanks...

1

@matiasluduena23

Posted

@eniskrt I pernsonally try to aviod media query every time it's possible. There is a concept in css grid that is implicit and explicit. You can implicit define your number of columns and rows or, you can set and explicit behaviour and let the browser make change on resize. Here exlaint the concepts more clearly.

Good code!!! Matias

1
Enis Kerti 590

@eniskrt

Posted

@matiasluduena23

The video you recomended realy enlighten me. Thanks...

Good Codes! Enis

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