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 columns

Mohieb 90

@dev-mohieb

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 did NOT expect this one to be as hard as it was. This might not pass me the challenge. What other way could I have done it so that it's responsive throughout the 1440px - 375px resolutions?

Flex kept scaling the sizes in a weird way which made the columns appear out of sync when I'm testing for responsiveness. Delete the media queries to see what I'm talking about.

Sigh, where do you think I should focus so that I learn from my mistakes here? Thanks for answering. Also, there is no readme file because I'm too frustrated to write one.

Community feedback

Divine Obeten 2,415

@Deevyn9

Posted

Hi Mohieb, congrats on completing this challenge, I had a look at your solution, everything looks great, and I can't understand your question, can you explain it a little further, I'll love to help.

0

@LucianoOliveira1

Posted

Hello MOHIEB'S! First of all, congratulations for the project because it turned out very good. I'm starting in the area and I identify with you when you say you're frustrated, there are times when it's just like that. But don't give up, there are amazing people here and always very willing to help!

Regarding your problem with the size, I believe that what is causing the card to not respect the size is the .column{max-width: 650px;} inside the media queries for 840px. Removing it, the cards are within the size established initially.

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