Hide a div using css in wordpress-CodePudding

This is the html of what I want to hide

<div >
            <div >1</div>
            <div >donation</div>
        </div>

I've tried to use the CSS code:

.count {
  display: none;
}

As well as:

body.page-id-750 div.count {
  display: none;
}

For ref the body is:

<body itemtype="https://schema.org/WebPage" itemscope="itemscope"

CodePudding user response：

Try with

.count {
  display: none!important;
}

body.page-id-750 div.count {
  display: none!important;
}

CodePudding user response：

did you try :

    body.page-id-750 div.count  {
   visibility : hidden;

}

CodePudding user response：

@HafsahNasir you are right, I have tried both of your CSS code and it doesn't work because of CSS specificity. Try the following it will work. You can check the screenshot: https://i.imgur.com/wJnuc6n.png

.introduction .income-stats > div.count {
    display: none;
}

If there are two or more CSS rules that point to the same element, the selector with the highest specificity value will "win", and its style declaration will be applied to that HTML element.

Here is a link to read more about CSS specificity: https://www.w3schools.com/css/css_specificity.asp

CodePudding user response：

I looked add you website code and the problem is that you are loading a widget thats an iframe.

In basic an iframe is an element to show an other website inside your website. Your website doesn't control the iframe content.

Now the strange part is if i look add the iframe you are loading it with code from your own website? So the solution would be adding the css to your widget or iframe.

Is there a widget or plugin you are using?