4-Card Section, Desktop/Mobile view — HTML, CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Panos, congratulations for your new solution!

  Your solution is amazing and fully responsive, but due the overflow: hidden; your card start to crop the icons when the screen scales down. I know that you've used overflow: hidden; to make the colored bar gets the rounded border a way to fix it is to give the border radius to the colored bar or create the bar using span inside the html.

  .card {
      overflow: hidden;
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Panos•170

  @panosjapan7Posted over 2 years ago

  @correlucas Hey! Thank you for the tip.

  I still have an issue though. In very small resolutions, a couple of the icon images go outside the card's body.

  Here's a screenshot I took

  Any idea why?

  0

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @panosjapan7 Its all because the overflow: hidden I think the best way is removing that and managing the colored bar with span, I did this in my challenge, if you want to check the structure here's the link:

  https://www.frontendmentor.io/solutions/4-card-feature-section-vanilla-css-custom-design-glassmorphism-35MDUfOBdt

  Overflow: hidden is amazing tool, but in this kind of situation is tricky to manage.

  0

  

  Panos•170

  @panosjapan7Posted over 2 years ago

  @correlucas No, I got this issue even after removing the overflow: hidden and giving border radius to the horizontal lines.

  I think it's because the icons size is not responsive and eventually the card becomes too small and the icons don't fit in the cards.

  (I've updated my repository with border-radius to the horizontal lines)

  0

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @panosjapan7 ah sorry bro, I get the issue, is the height: 240px; from the card, just remove it to make the card grow automatically

  .card {
      background-color: white;
      box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;
      max-width: 380px;
      /* height: 240px; */
      border-radius: 10px;
      /* overflow: hidden; */
      margin-bottom: 30px;
  }
  

  Marked as helpful

  0

  

  Panos•170

  @panosjapan7Posted over 2 years ago

  @correlucas Done and solved. Thank you so much, Lucas!

  1