Making cart-popup have the same size with div cart

[gcobani]

Hi Team

I have cart and its size is right, but when i click view-detail(this popup cart and its size is not the same size as cart). How do i make just only the size when clicked to view it should popup the same size as cart? How do i achieve this from the CSS size?

//html code

<div class="col-lg-4 col-md-6 col-sm-12 pb-1">
    <div class="card product-item border-0 mb-4">
        <div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
            <img class="img-fluid w-100" src="img/product-1.jpg" alt="">
        </div>
        <div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
            <h6 class="text-truncate mb-3">Colorful Stylish Shirt 0</h6>
            <div class="d-flex justify-content-center">
                <h6>R120.00</h6><h6 class="text-muted ml-2"><del>R120.00</del></h6>
            </div>
        </div>
        <div class="card-footer d-flex justify-content-between bg-light border">
            <a href="#" class="btn btn-sm text-dark p-0 view-details-btn" id="cart-0"><i class="fas fa-eye text-primary mr-1"></i>View Detail</a>
            <a href="#" class="btn btn-sm text-dark p-0 add-to-cart-btn" id="cart-123">
            <i class="fas fa-shopping-cart text-primary mr-1"></i>Add To Cart</a>
        </div>
    </div>
</div>
    <!--View item details #1-->
    <div class="card-popup-container" id="cart-popup-0">
        <div class="card-popup">
            <button class="close-popup-btn">&times;</button>
            <div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
                <img class="img-fluid w-100" src="img/product-1.jpg" alt="">
            </div>
            <div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
                <h6 class="text-truncate mb-3">Colorful Stylish Shirt 1</h6>
                <div class="d-flex justify-content-center">
                    <h6>R121.00</h6><h6 class="text-muted ml-2"><del>R121.00</del></h6>
                </div>
            </div>
            <div class="card-footer d-flex justify-content-between">
                <a href="#" class="btn btn-primary add-to-cart-btn">Add to Cart</a>
                <button class="close-popup-btn btn btn-secondary">Close</button>
            </div>
        </div>
    </div>
<!---View details ends here #1-->

// jquery side

$(document).ready(function() {

  // Set up click listener for view details button
  $('.view-details-btn').on('click', function(e) {
    e.preventDefault(); // prevent default behavior of the link
    // Get the index of the clicked item
    var index = $(this).attr('id').split('-')[1]; //alert(index);
    // Show the corresponding popup
    $('#cart-popup-' + index).show();
  });

  // Set up click listener for close button
  $('.close-popup-btn').on('click', function() {
    // Hide the popup
    $(this).closest('.card-popup-container').hide();
  });

});

[PaulOB]

Hi,

Without seeing a full version I can’t say whether this is right but as a start perhaps you can apply the same column rules to your popup which should make them roughly the same.

e.g.

<div class="col-lg-4 col-md-6 col-sm-12 pb-1 card-popup-container" id="cart-popup-0" style="">
      <div class="card-popup">
       etc...