E-commerce product page

Community feedback

• 

  Juan Miguel Cardona A•50

  @juanprog97

  Posted over 2 years ago

  hey Amritpal Singh, I see that you are missing the border that indicates the selected image, here is a solution so that you can lower the opacity and still have the border visible.

  1- you should wrap the img in a div . For the div the border style is applied and in the child img the opacity is lowered and thus does not affect the visibility of the border. HTML

  <div class="container-img">
     <img src="https://http2.mlstatic.com/D_NQ_NP_658639-CBT50339432941_062022-W.jpg">
    </div>
  

  CSS

  div.container-img{
    display: block;
    width:300px;
    height: 300px;
    border: 6px solid black;
    
  }
  .container-img img{
    width: 100%;
    height: 100%;
    opacity: 0.4;
  }
  

  happy coding👍🏻🔥💯

  00
• 

  S MD suleman•3,510

  @sulemaan7070

  Posted over 2 years ago

  hey Amritpal Singh😄, congratulations on completing the challenge here are a few tips to make your site better...

  1.You can the cursor:pointer on the +,- and the delete svg..

  2.When I am adding 4 items.. and pressing the Add to cart the 4 should become 0.

  3.on the mobile: the images inside the carousel are getting squeezed you can use the object-fit:contain to tackle that problem..

  4.And for the (mobile-menu) or .navigation you can add

  .navigation {
      position: fixed;
  }
  

  so that user cannot scroll down the menu..

  Everything else looks great!! happy coding👍🏻🔥💯

  00