css - unable to make this payment discounts cards design responsive for small screen devices (mobile)

Question

Hi I am unable to make this payment discounts cards design responsive for small screen devices (mobile) Its no showing properly want all cards align together in mobile screen as well I am using WP Bakery and CSS I put in Code Snippet My theme is woodmart WordPress

Please find link in which it is embedded : https://matrixstore.pk/product/oneplus-nord-rugged-case-by-kapaver-black/

/**** Payment Table on product page ****/

.price-on-single-page td {
  color: white;
  padding-left: 10px;
  padding-right: 10px;
}

table.price-on-single-page tbody.body-price-on-single-page span.woocommerce-Price-amount.amount {
  color: white;
}

.row1-on-single-page td {
  font-family: 'Poppins', sans-serif;
  font-size: 11pt;
}

table.price-on-single-page tbody.body-price-on-single-page tr.row2-on-single-page td.column6-on-single-page {
  background-color: red;
}

tbody.body-price-on-single-page {
  background-color: #0b9444;
}

@media (min-width: 769px) {
  .card {
    position: relative;
    height: 285px;
    width: 29.7%;
    margin: 4px;
    float: left;
    color: white;
    border-radius: 15px;
    padding: 9px 2.5px;
    transition: .8s;
  }
}

.card:hover {
  transform: scale(1.1);
}

.col-sm-4:nth-child(1) .card,
.col-sm-4:nth-child(1) .card .title {
  background-image: url("https://matrixstore.pk/wp-content/uploads/2021/01/Red-Background-1.png");
  opacity: 100%;
  background-repeat: no-repeat;
}

.col-sm-4:nth-child(2) .card,
.col-sm-4:nth-child(2) .card .title {
  background-image: url("https://matrixstore.pk/wp-content/uploads/2021/01/Black-Background.png");
  opacity: 100%;
  background-repeat: no-repeat;
}

.col-sm-4:nth-child(3) .card,
.col-sm-4:nth-child(3) .card .title {
  background-image: url("https://matrixstore.pk/wp-content/uploads/2021/01/Yellow-Background-1.png");
  opacity: 100%;
  background-repeat: no-repeat;
}

.col-sm-5:nth-child(1) .card,
.col-sm-5:nth-child(1) .card .title {
  background-image: url("https://matrixstore.pk/wp-content/uploads/2021/01/Red-Background-1.png");
  opacity: 100%;
  background-repeat: no-repeat;
}

.col-sm-5:nth-child(2) .card,
.col-sm-5:nth-child(2) .card .title {
  background-image: url("https://matrixstore.pk/wp-content/uploads/2021/01/Black-Background.png");
  opacity: 100%;
  background-repeat: no-repeat;
}

.col-sm-5:nth-child(3) .card,
.col-sm-5:nth-child(3) .card .title {
  background-image: url("https://matrixstore.pk/wp-content/uploads/2021/01/Yellow-Background-1.png");
  opacity: 100%;
  background-repeat: no-repeat;
}

@media (min-width: 769px) {
  .card::before {
    content: '';
    position: absolute;
    border-style: solid;
    border-color: white;
    padding: 5px 10px;
    left: 7px;
    bottom: 4px;
    border-radius: 15px;
    right: 4px;
    top: 4px;
    width: 93%;
    height: 95%;
  }
  .option ul li {
    margin: 0 0 0px;
    padding: 0;
    list-style: none;
    color: #fff;
    font-size: 19px;
  }
}

.col-sm-4:nth-child(4) .card,
.col-sm-4:nth-child(4) .card .title {
  display: none;
}

.card a:hover {
  text-decoration: none;
}

.card span.amount {
  color: white
}

@media (min-width: 769px) {
  .title {
    color: white;
    font-size: 15px;
  }
}

@media (max-width: 769px) {
  .title {
    color: white;
    font-size: 15px;
  }
}

@media (min-width: 769px) {
  .col-sm-4 {
    color: white;
    position: relative;
    max-width: 100%;
  }
}

@media (max-width: 769px) {
  .card {
    color: white;
    border-radius: 10px;
    width: 33.33%;
    height: 280px;
    box-sizing: border-box;
    float: left;
    transition: .5s;
    margin-bottom: 10px;
  }
}

@media (max-width: 769px) {
  .option ul li {
    margin: 0 0 0px;
    list-style: none;
    color: #fff;
    font-size: 15px;
  }
}

<a href="https://matrixstore.pk/wp-content/uploads/2021/01/Upto-10-Off-500x100-2.png"><img class="alignnone wp-image-42393" src="https://matrixstore.pk/wp-content/uploads/2021/01/Upto-10-Off-500x100-2.png" alt="" width="606" height="86" /></a>
<section>
  <div class="col-sm-4">
    <div class="card text-center">
      <div class="title"><strong><img src="https://matrixstore.pk/wp-content/uploads/2021/01/bank-transfer-icon-latest.svg" alt="bacs" width="150" height="150" />
        Bank Transfer</strong>
      </div>
      <div class="option" align="center">
        <ul>
          <li style="list-style-type: none;">
            <ul>
              <li><i class="fa" style="font-size: 25px;">?</i> You Pay:
                [wcj_product_price_excluding_tax]
              </li>
            </ul>
          </li>
        </ul>
        &nbsp;
        <ul>
          <li><i class="fa" style="font-size: 25px;">?</i> You Save:
            [wcj_product_price_excluding_tax multiply_by="0.10"]
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card text-center">
      <div class="title"><strong><img src="https://matrixstore.pk/wp-content/uploads/2021/01/cod-icon-latest.svg" alt="cod" width="150" height="150" />
        Cash On Delivery</strong>
      </div>
      <div class="option" align="center">
        <ul>
          <li style="list-style-type: none;">
            <ul>
              <li><i class="fa" style="font-size: 25px;">?</i> You Pay:
                [wcj_product_price_excluding_tax]
              </li>
            </ul>
          </li>
        </ul>
        &nbsp;
        <ul>
          <li><i class="fa" style="font-size: 25px;">?</i> You Save:
            [wcj_product_price_excluding_tax multiply_by="0.0000000001"]
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card text-center">
      <div class="title"><strong><img src="https://matrixstore.pk/wp-content/uploads/2021/01/card-icon-latest.png" alt="cod" width="60" height="60" />
        Credit/Debit Card</strong>
      </div>
      <div class="option" align="center">
        <ul>
          <li style="list-style-type: none;">
            <ul>
              <li><i class="fa" style="font-size: 25px;">?</i> You Pay:
                [wcj_product_price_excluding_tax]
              </li>
            </ul>
          </li>
        </ul>
        &nbsp;
        <ul>
          <li><i class="fa" style="font-size: 25px;">?</i> You Save:
            [wcj_product_price_excluding_tax multiply_by="0.05"]
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>
&nbsp;
&nbsp;

question from:https://stackoverflow.com/questions/65945716/unable-to-make-this-payment-discounts-cards-design-responsive-for-small-screen-d

Answer 1

Waitting for answers