I need help with adaptive layout of cards. I can not set the correct positioning of the block with img . Tell me, how to make this card? enter image description here

Here is my SASS code and HTML code:

 <div class="item-block mx-auto"> <div class="item-block-top"> <a href=""><img src="/public/img/img_product.png" alt="product"> <span class="badge badge1 badge-danger float-left">New</span> <span class="badge badge2 badge-secondary float-right">New</span> </a> </div> <div class="item-block-body"> <h5>Lorem ipsum dolor sit amet.</h5> <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p> <span>Price</span><span class="float-right">OldPrice</span> <button>add to card</button><button>view</button> </div> </div>

Here sass

  * padding: 0 margin: 0 body background-color: #c1c1c1 .main width: 80% background-color: #fff margin-right: 10% margin-left: 10% .row margin-left: 5% margin-right: 5% .item-block margin-top: 30px margin-bottom: 30px border: 2px solid lightgrey width: 20% .item-block-top display: block border: 2px solid lightgrey margin-right: 7.5px margin-left: 7.5px margin-bottom: 20px a display: inline-block position: relative line-height: 0 img height: 100% width: 100% .badge1 position: absolute left: 0 top: 50% .badge2 position: absolute right: 0 top: 50% .item-block-body padding-left: 7.5px padding-right: 7.5px
  • sassmeister.com has a converter for examples so that you can make an example reproducible - kizoso
  • @kizoso Yes it doesn’t matter, I can at least put css here, it will not work, right there, and bootstrap and img - Pavel Igorevich
  • one
    make a reproducible example of what you already have - daniel

1 answer 1

On CSS :)

 .item-block-top { width: 100%; max-width: 500px; border: 1px solid red; margin: 0 auto; display: table; position: relative; top: -20px; } .item-block.mx-auto { width: 100%; max-width: 522px; border: 1px solid red; display: inline-block; } img{ max-width: 100%; } body{ margin-top: 50px; } 
 <body> <div class="item-block mx-auto"> <div class="item-block-top"> <a href=""><img src="https://otvet.imgsmail.ru/download/e647fb84923a6605c02764a3de2e4df6_i-13.jpg" alt="product"> <span class="badge badge1 badge-danger float-left">New</span> <span class="badge badge2 badge-secondary float-right">New</span> </a> </div> <div class="item-block-body"> <h5>Lorem ipsum dolor sit amet.</h5> <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p> <span>Price</span><span class="float-right">OldPrice</span> <button>add to card</button><button>view</button> </div> </div> </body>