0

here is my html code using boostrap4 to make cards in my home page :

  <div class="container"><div class="card-columns" >
{% for i in post %}
<div class="card text-center" style="width: 16rem;">
    {% if i.image_url %}
    <img class="card-img-top" alt="Card image" style="width:100%" src="{{ i.image_url }}">
    {% else %}
    <img class="card-img-top" alt="Card image" style="width:100%" src="{{ i.image.url }}">
  {% endif %}
  <div class="card-body">
      <h5 class="card-title"> {{i.title  | slice:":40"}} </h5>
        <p class="card-text"> {{i.description | slice:":50" }}</p>
    <ul class="list-unstyled">
      <li class="align-items-center" style="text-align:center;"><h4 class="text-success font-weight-bold align-items-center">{{i.deal_price}}</h4> <del>{{i.orig_price}}</del> </li>
      <li class="text-danger font-weight-bold " style="text-align:center;">{{i.ending_day}} {{i.ending_time}}</li>
      {% if not i.is_expired %}
      <li class="text-danger font-weight-bold "style="text-align:center;">Expired</li>
      {% endif %}
    </ul>
        <a href="{% url 'post_detail' i.slug %}" class="btn btn-primary stretched-link" style="text-align:center;">Read More</a>
    </div>
    </div>
  {% endfor %}

and here is how my website looks like in pc screen:

but in smaller screen this is how it looks :

in phone screen :

I want a way to make those blog cards responsive to adapt any screen size and looks decent in the center. Thank you!

Qwert
  • 1
  • 1

0 Answers0