CODEWITHSUNDEEP
htmlcss
Sandra
Sandra

Reputation: 167

CSS Class doesn't seem to be alive

I've been giving up for months. The CSS class "specifics" just doesn't work and I have no idea why.

Code

 .characteristic-product-comparator {
        font-size:18px;
        font-weight:bold;
        margin-bottom:15px;
        padding-bottom:20px;
        border-bottom:1px #211E33 solid;
    }
     div.characteristic-product-comparator .specifics {
        font-weight:normal !important;
        font-size:16px;
    }
    <div class="characteristic-product-comparator">
    <p>Résolution<br> <span class="specifics">2160p</span></p>
    <p>Micro<br> <span class="specifics">Oui</span></p>
    <p>Caractéristiques<br> <span class="specifics">Zoom HD X5, Windows Hello, HDR, enregistrement 4K, suppression arrière plan.</span></p>
    </div>

This class on the other hand : 

.characteristic-product-comparator

is working fine.

The span class="specifics" just doesn't seem to inherit the class… Why does ".specifics" don't show any effect on the HTML ?

P.S: I'm on WordPress and I'm using Divi. I don't know if the Divi CSS files can be linked to this problem.

Thank you very much.

Upvotes: 0

Views: 87

Answers (2)

bnson
bnson

Reputation: 222

Special character at "Special" make CSS don't working. I am surprised and funny with this finding :>>

enter image description here

 .characteristic-product-comparator {
        font-size:18px;
        font-weight:bold;
        margin-bottom:15px;
        padding-bottom:20px;
        border-bottom:1px #211E33 solid;
    }
     div.characteristic-product-comparator .specifics {
        font-weight:normal !important;
        font-size:16px;
    }
    <div class="characteristic-product-comparator">
    <p>Résolution<br> <span class="specifics">2160p</span></p>
    <p>Micro<br> <span class="specifics">Oui</span></p>
    <p>Caractéristiques<br> <span class="specifics">Zoom HD X5, Windows Hello, HDR, enregistrement 4K, suppression arrière plan.</span></p>
    </div>

Upvotes: 2

suspectus
suspectus

Reputation: 17258

I believe you have an issue with your theme's CSS or an issue with Safari.

More importantly however, simplifying the HTML may eliminate the need for any awkward CSS. 

.characteristic-product-comparator {
    font-size:18px;
    margin-bottom:15px;
    padding-bottom:20px;
    border-bottom:1px #211E33 solid;
}
.characteristic-product-comparator p {
    font-size:16px;
}

<div class="characteristic-product-comparator">
   <h2>Résolution</h2><p>2160</p>
   <h2>Micro</h2><p>Oui</p>
   <h2>Caractéristiques</h2><p>Zoom HD X5, Windows Hello, HDR, enregistrement 4K, suppression arrière plan.</p>
</div>

Upvotes: 0

Related Questions