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 3 column product page using HTML, CSS and Bootstrap

Raz Israeliβ€’ 50

@PishoTo

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

Community feedback

Lucas πŸ‘Ύβ€’ 104,420

@correlucas

Posted

πŸ‘ΎHello again Raz, congratulations for your new solution!

I was looking your previous solution and I've some tips for you:

First of all you can improve a bit the html semantics replacing the card divs with article. Remember to use div only for small blocks of content and for the bigger blocks choose meaningful tags.

You've used <br> to break the paragraph line but this is not a best practice because it gives your solution a strange behavior when the card grow in the mobile version and the text didnt grow to fit the card, you can control the paragraph size using max-width: 400px to make the text break lines or even use a limit of characters like max-width: 40ch to have each line having maximum 40 chracthres.

If you want to see my solution for the same challenge, here's the link: https://www.frontendmentor.io/solutions/3-column-preview-card-vanilla-css-custom-design-and-hover-states-e5uAfmUT71

πŸ‘‹ I hope this helps you and happy coding!

Marked as helpful

0

Raz Israeliβ€’ 50

@PishoTo

Posted

@correlucas thanks again, Lucas!! So much information and precious feedback - priceless! Will have a look at your solution and in case I have any questions I will let you know if that's ok :) Thank you!

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