Order summary card Using CSS flex

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Omar, congratulations for your new solution!

  Nice that you've add this custom hover! I'm happy to see that, the effect is really cool with your application! =)

  You need to improve two things, the image that's not resizing with the card, you can fix that using overflow: hidden and adding max-width: 100% and display: block.

  .card {
      overflow: hidden;
      display: grid;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      width: min(90%,20.4375rem);
      margin-inline: auto;
      background-color: #fff;
      border-radius: 20px;
      -webkit-box-shadow: 0 40px 40px -20px rgb(13 49 191 / 15%);
      box-shadow: 0 40px 40px -20px #0d31bf27;
      text-align: center;
  }
  

  A good practice to have all the image inside the container scaling and respecting the size of the container, you need to add max-width: 100% and add alsoobject-fit: cover to make the image auto-crop when resizing inside the column:

  img {
      display: block;
      object-fit: cover;
      max-width: 100%;
  }
  

  👨‍💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/order-summary-component-vanilla-css-custom-wave-background-hover-tEKUwaT2id

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  Ebere Ndukwu•180

  @eby-coderPosted about 2 years ago

  Your page is very beautiful and I love the hover styles you added. Wonderful job. I just wish that your CSS code was more readable and structured and not compressed. I had a hard time reading your styles and learning them.

  Marked as helpful

  0

  ---

  

  omar saleh•150

  @omarsaleh11Posted about 2 years ago

  @eby-coder sorry about the compressed CSS file I use live scss compiler, and I will upload my scss files instead

  0