Four card feature section solution

Community feedback

• 

  bikeinman•1,080

  @BikeInManPosted almost 3 years ago

  Nicely done and code looks nice too.

  You have used ids like orange, blue etc., to style individual cards. But may be you could have another class like card card-orange etc. Most people use ids to access elements from Javascript, because they are supposed to be unique to a page.

  Cards are themselves, very responsive. Very nice, but may be you should fix a minimum size below which you will not allow it to stretch, so that it will still look nice and card like and not like a long strip of element. ( like in dev tool, iPhone 12/13 mode).

  Just my two cents, but great work.

  Marked as helpful

  0

  ---

  

  Callie•170

  @Callietron300Posted almost 3 years ago

  @BikeInMan thanks so much, I actually was really struggling with the border tops- I was using ".card .blue" as a class CSS selector to colour them and it wasn't working I tried alot of combinations including adding div etc (having four different colours to work with was useful for experimenting) so I used IDs in the end as it was an easy override, but maybe not a perfect one.

  Thank you I'll add fixing the stretch a little later that's a good idea!

  Really appreciate you taking the time to look through my code

  0

  

  bikeinman•1,080

  @BikeInManPosted almost 3 years ago

  @Callietron300 I don't know what exactly happened. But I understand your frustration, I have been there. But lately, I try to stop, take a break and think why something is not working, if it is supposed to work.

  I am not very confident about my CSS skills yet, but I didn't have the problem. May be you want to look at my solution. https://bikeinman.github.io/frontend-mentor-4-cards/

  Good Luck.

  Marked as helpful

  0

  

  Callie•170

  @Callietron300Posted almost 3 years ago

  @BikeInMan Sweet thanks, I will have a look at yours

  0
• Account deleted

  Hello there! 👋

  Congratulations on finishing your challenge! 🎉

  I have some feedback on this solution:

  • Always Use Semantic HTML instead of div like <main> <header> , etc for more info.

  if my solution has helped you do not forget to mark this as helpful!

  Marked as helpful

  0