Skip to content
Submitted over 1 year ago

3-column preview card component

Earl Villapaz•80
@iEarlG
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello everyone! 👋

I'm out for a week because of a mentorship 😅 I learned a lot but at the same time I can't get over about this challenge. I finished the 3-column preview card component! It felt amazing to complete my 1st challenge this month <3.

What did you find difficult while building the project?

  • The responsiveness of the website took me too long to process, but I think I nailed it, thanks to the feedback on my last challenges😅. I make the mobile side first but I got lost and the height & width on the desktop is not the same from the challenge it seems too small I guess? any feedback to fix this I would really appreciate it <3

Which areas of your code are you unsure of?

  • I'm not sure about the the height & width on the desktop side is not the same from the challenge it seems too small I guess?

Do you have any questions about best practices?

  • Please feel free to input any best practices that you find not best on my code I would really appreciate any feedbacks and best tips from you guys!!

Happy weekend coding, guys!! 👨‍💻💙

Community feedback

  • Furk•600
    @doganfurkanPosted over 1 year ago

    Hello! Good job, congrats! Here are some quick fixes that you can do:

    • Your breakpoint for your media query is 1440px. It is a lot. I think you should bring it down to somewhere like 700px.
    • Your main problem with the width and height is due to your not assigning a max-width to your container. If you assign .container{max-width:1000px} you can restrict the maximum width of the design.
    • For mobile view, you are using align-items: center for your container. This results in each container having different widths. It is not the most pleasing thing to see. Just get rid of that and let them have 100% width of the container.
    • At last, your buttons can use some more margin-top for the desktop view.

    Again, good job! Keep coding!

    Marked as helpful
    0
    Earl Villapaz•80
    @iEarlGPosted over 1 year ago

    Thankyou, I appreciate your feedbacks & tips. I will change the code later today, again thanks @doganfurkan!

    1

Please log in to post a comment

Log in with GitHub

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