Why is my custom style not taken by the HTML page?

Question

Please help me to resolve this issue:

my_image class in custom.css is not reflecting in the product.html file. I'm unable to resolve this issue. class="my_image" in product.html is not taking the alteration that I have provided in the custom.css

custom.css

  .my_image{
  width:100%;
  height:auto;
  padding:10px;
  }

base.html

  {% load static %}
  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
<meta name="discription" content="{% block metadiscription %} {% endblock %}">
  <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
  <link rel="stylesheet" href="{% static 'css/custom.css' %}">
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %} {% endblock %}</title>
 </head>
 <body>
  <div class="container">
  {% include 'header.html' %}
  {% include 'navbar.html' %}
  {% block content %}
  {% endblock %}
  {% include 'footer.html' %}
  <script src="{% static 'js/popper.min.js' %}"></script>
  <script src="{% static 'js/bootstrap.min.js' %}"></script>
  </div>
  </body>
  </html>

catagory.html

    {% extends 'base.html' %}
    {% load static %}
    {% block metadiscription %}
        {% if catagory %}
            {{catagory.description|truncatewords:155 }}
        {% else %}
            welcome
        {% endif %}
    {% endblock %}
    {% block title %}
    {% if catagory %}
    {{catagory.name}}--ABC store
    {% else %}
    see our new collection
    {% endif %}
    {% endblock %}
    {% block content %}
    {% if catagory %}
    <div>
        <div class="row my_row_class">
            <div class="mx_auto">
                <a href="{% url 'shop:allproductcat' %}">OUR PRODUCT COLLECTION</a>
            </div>
        </div>
    </div>
    {% endif %}
    <div>
        {% if catagory %}
        <img class="center" src="{{catagory.image.url}}" alt="{{catagory.name}}" height="200px">
    </div>
    <div>
        <h1 class="text-center my_title">
            {{catagory.name}}
        </h1>
        <p class="text-center text-justify">
            {{catagory.description}}
        </p>

    </div>
    {% else %}
    <div>
        <img class="my_image_padding" src="{% static 'img/banner.png' %}" height="300px" width="1300px">
    </div>
    <br>
    <div>
        <h1 class="text-center">OUR PRODUCT COLLECTION</h1>
        <p class="text-justify"></p>
    </div>
    {% endif %}

    <div class="container">
        <div class="row mx_auto">
            {% for product in products.object_list %}
            <div class="my_bottom_margin col-12 col-sm-12 col-md-12 col-lg-4">
                <div class="card text-center mb-3 shadow" style="min-width:18rem;">
                    <a href="{{product.get_url}}"><img class="card-img-top my_image" src="{{product.image.url}}"alt="image not found" height="100px"></a>
                    <div class="card-body">
                        <h4>{{product.name}}</h4>
                        <p>{{product.price}}</p>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        <div class="mx_auto">
            {% if products.paginator.num_pages > 1 %}


            <hr>
            <div class="text-center">
                {% for pg in products.paginator.page_range %}
                    <a href="?page={{pg}}" class="btn btn-light btn-sm {% if product.number == pg %} active {% endif %}">{{pg}}</a>
                {% endfor %}
            </div>
            {% endif %}
        </div>
        <br>
    </div>
    {% endblock %}

product.html

    {% extends 'base.html' %}
    {% load static %}
    {% block metadiscription %}
            {{product.description|truncatewords:155 }}
    {% endblock %}
    {% block title %}

    {{product.name}}--ABC store

    {% endblock %}
    {% block content %}
    <div  class="row my_product_row_class">
        <div  class="mx_auto">
            <p> <a href="{% url 'shop:allproductcat' %}">Home</a> | <a href="{{product.catagory.get_url}}">{{product.catagory}}</a>|{{product.name}}</p>
        </div>
    </div>
    <br>
    <div class="container">
    <div class="row">
    <div class="col-md-6 text-center">
        <div>
            <img class="my_image" src="{{product.image.url}}" alt="{{product.name}}">
        </div>
        </div>
            <div class="col-md-6">
                <div >
                <h1 class="my_prod_title">{{product.name}}</h1>
                <p>Rs {{product.price}}</p>
                <p>Product description</p>
                <p class="text-justify my_prod_text">{{product.description}}</p>
                {% if product.stock <= 0 %}
                <p class="text-justify my_prod_text"><b>OUT OF STOCK</b></p>
                {% else %}
                <a class="btn btn-secondary" href="">ADD TO CART</a>
                {% endif %}
                </div>
        </div>
        </div>
        </div>
    {% endblock %}

What have you tried to resolve the problem? Where are you stuck? Is the path to your CSS file printed properly to the markup? — Nico Haase, Sep 17 '21 at 07:33
in base.html i have called it, and i have extended 'base.html, in the product.html — aswin, Sep 17 '21 at 07:40
And did you check whether the markup is generated properly, and the CSS file is loaded properly? — Nico Haase, Sep 17 '21 at 07:52

score 0 · Answer 1 · answered Sep 17 '21 at 09:24

The problem is that you have other styles the override your custom style. Try adding the style directly in your HTML file above the element you want to affect and add the CSS !important rule to the properties.

Example

<style>
.my_image{
  width:100%!important;
  height:auto!important;
  padding:10px!important;
  }
</style>


<div class="my_image"></div>

score 0 · Answer 2 · answered Sep 17 '21 at 09:54

0

This could be a specificity issue with your CSS, in that you may have other styles with a higher specificity overriding your custom styling.

Using the inspector tools in the browser would help you see if this is the issue - https://courses.cs.washington.edu/courses/cse154/19su/resources/assets/debugging/chrome-inspector.html

If this is the case, try making the "my_image" class more specific than the styles you are trying to overwrite:

HTML:

<div class="col-md-6 text-center my_image-wrapper">
        <div>
            <img class="my_image" src="{{product.image.url}}" alt="{{product.name}}">
        </div>
</div>

CSS:

<style>
.my_image-wrapper .my_image{
  width:100%!important;
  height:auto!important;
  padding:10px!important;
  }
</style>

answered Sep 17 '21 at 09:54

Michael Butler

159
6

when i introduce altration to the css code that u have provided ,still there is no reflection of altration in my my product code – aswin Sep 17 '21 at 10:14
@aswin I would try using the inspector tools in your browser to see the issue. – Michael Butler Sep 17 '21 at 10:45
Gass's answer about using !important will also help show you if it's a specificy issue, but it is kind of a last resort (see answer by DA) https://stackoverflow.com/questions/8360190/is-it-bad-to-use-important-in-a-css-property – Michael Butler Sep 17 '21 at 10:45

Why is my custom style not taken by the HTML page?

2 Answers2

Example