Order Summary Card Using TailwindCSS

Community feedback

• 

  Ngouend raoul Gerard•560

  @BeinRain06Posted about 1 year ago

  Amazing work @star-369 you have done quite great with the mobile design of your order summary component.

  One way to make it more looking good is to fix the image flow that push the entire general container make it overflowing right and left in your mobile version.

  One way I suggest is to put your image inside a div and style this div with width = 100 vw and height = your previous height ;

  And after style img width and height using percentage units.

  Like e.g underneath : Index.html :

  <div class="img-wrapper">
  

    <img src="./image.png" class="my-img" alt="picture missing" />
  </div>
  

  And style.css :

     .img-wrapper {
  

       position:relative;
       top:0
       width:100vw;
       height: 80px ;// example 
       overflow-x: hidden ;
     }
  
    .my-img {
  
      width: 100%;
      height: 100%;
      object-fit:cover ;
     }
  

  object-fit:cover will make your img fit the div container and overflow-x: hidden will prevent your img to push the container and as well will maintain the img inside the x axis of that div container avoiding a float .

  Hope that can be a help @star-369 b and keep going like that you will definitely unlock many skills, nice day/night and happy coding!

  Marked as helpful

  0

  ---

  

  star-369•280

  @star-369Posted about 1 year ago

  @BeinRain06 thx for the feedback! i'm going to applied your solution soon.

  0