Question

Below is the HTML on my in built page:

<div class="notes quotes-notification member-savings f-left">
<h2>My Notifications</h2>
<ul>
<li><b>need to modify the HTML a little more than on the other pages you worked your account. </li>
<li>An <a href="#">answer has been posted</a> to a question you submitted.</li>
<li>A shop responded to a <a href="#">review you posted</a>.</li>
</ul>
</div>

quotes-notification and member-savings both have different css as below:

.member-savings {
    width: 19%;
    margin-right: 1.6%; 
    border: 2px solid #0c86c9;
}
.quotes-notification{
    width: 32%; 
}

On the page, I need the Notification block to take width as 32%, but this block considers 19% as width and overrides the 32%.
Here, I can not remove the class member-savings Is there any way to disregard 19% ?

Answer 1

Specifying !important for width:32%; is one way to achieve this. But it is not a recommended practice. Another way is by trying to increase the specificity of the CSS delcaration for quotes-notification. i.e. instead of:

.quotes-notification{
    width: 32%; 
}

try something like:

body div.quotes-notification {
    width: 32%; 
}