Responsive four card selection using BEM notation, transition

Community feedback

• 

  MikDra1•6,980

  @MikDra1Posted 2 months ago

  Nice one 😀

  If you are curious how you can do this straight lines on the top of each card here is my tip:

  Create another element in each of the cards. Then position this element absolute. Card should be positioned relative. At the end you need to give this element a height of 3px width of 100% and top 0 and left 0. You can also use ::after or ::before pseudo elements to create these.

  Hope you found this comment helpful 💗

  Good job and keep going 😁😊😉

  Marked as helpful

  1

  ---

  

  Csaba Hell•180

  @hellcsabaPosted 2 months ago

  Hi, thank you for the kind words!

  To be honest, I didn't noticed that the top colored lines are full straight and my current solution has a slight curve. I appreciate the help, I'm gonna take a look on it.

  Have a nice day!😊

  0

  

  MikDra1•6,980

  @MikDra1Posted 2 months ago

  @hellcsaba

  I'm happy I could help 😁

  0
• 

  P

  Steven Stroud•11,910

  @StroudyPosted 2 months ago

  Looking at your code aswell I learned another way, On the .features__icon I used margin-left: auto; and you used align-self: flex-end; Same job different way, This is why I like looking at other peoples solutions.

  Marked as helpful

  1
• 

  P

  Steven Stroud•11,910

  @StroudyPosted 2 months ago

  Hey, I'm not doing any deep dive code reviews at the moment but I took a quick look at the code and noticed that removing the max-width: 20%; property from the .features__icon class seems to improve the visual presentation. The icon appears less constrained and more proportionate without the shrink effect.

  1

  ---

  

  Csaba Hell•180

  @hellcsabaPosted 2 months ago

  Hi, thank you for your comment. I'm not gonna lie, I checked the difference on the live site with and without the max-width: 20%; propery but I don't see any difference at all. I checked it different screensizes as well. Can you elaborate it what shall I experience?

  1

  

  P

  Steven Stroud•11,910

  @StroudyPosted 2 months ago

  @hellcsaba, Between 230px - 422px and 640px - 830px, the icon size decreases, while the text size remains static, creating a visual imbalance between the icon and the text. It is a small difference but removing that max-width: 20% from .features__icon solves that issue.

  0