Concealing a div with CSS on a WordPress site

This is the snippet of code that I need to keep hidden

<div class="count">
            <div class="number">1</div>
            <div class="text">donation</div>
        </div>

I attempted to hide it using CSS like this:

.count {
  display: none;
}

And also tried:

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

The structure of the body tag is as follows:

<body itemtype="https://schema.org/WebPage" itemscope="itemscope" class="page-template-default page page-id-750 logged-in admin-bar wp-custom-logo ast-single-post ast-mobile-inherit-site-logo ast-inherit-site-logo-transparent ast-theme-transparent-header ast-hfb-header ast-page-builder-template ast-no-sidebar astra-3.9.2 elementor-default elementor-kit-442 elementor-page elementor-page-750 customize-support e--ua-blink e--ua-chrome e--ua-webkit ast-mouse-clicked ast-header-break-point"

Answer №1

Experiment by using

.quantity {
  visibility: hidden!important;
}

html.page-id-750 div.quantity {
  visibility: hidden!important;
}

Answer №2

Upon examining your website code, it appears that the issue lies in loading a widget that is an iframe.

Essentially, an iframe is used to display another website within your own website, with no control over the content of the iframe.

What's intriguing is that the iframe being loaded seems to be using code from your own website. In this case, adding CSS to your widget or iframe should resolve the issue.

Could you provide more information about the widget or plugin you are utilizing?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Click outside to close the div

I'm looking to create a functionality where a div can be hidden by clicking on the close link within it, or by clicking anywhere outside of the div. The code I have currently works for closing the div by clicking on the close link, but I am facing an ...

Ways to conceal a dynamically generated div upon page load?

I am currently facing a scenario where I need to dynamically create a div. My initial approach was to create it on the document ready event, but the requirement is for it to be displayed only upon selection. The problem I am encountering is that the empty ...

Retrieving a tag from bs4.element.tag results in an empty value

As I follow a tutorial to extract answers from a Quora URL, my code is set up like this url = 'https://www.quora.com/Should-I-move-to-London' r = requests.get(url) soup = BeautifulSoup(r.content, 'html.parser') answers = soup.find(" ...

How can you ensure an element's height matches its width within an Ionic framework?

I am currently creating an application using the Ionic framework, and I am looking to set a square image as the background. The challenge is to ensure that the image scales appropriately for different screen resolutions; ideally, it should occupy the full ...

Elements with inline-block display not aligning horizontally next to each other

I am puzzled as to why the two sections, section.structure and section.specificity, are not aligning properly. It seems that when I reduce the width, they line up correctly at a certain point which I haven't identified yet. My goal is to have the wid ...

The select box in CSS is optimized for Chrome but poorly displayed in Firefox

Struggling with styling the select box for both webkit and moz browsers. It looks great in Chrome, but terrible in Firefox - the default option is not vertically aligned with the select box. Can someone help me pinpoint the issue in this code? CSS: sele ...

What steps can I take to stop Firefox from automatically adding vertical scrollbars to a select dropdown when I change the background color?

Having an issue with changing the background color of a select dropdown. It works fine in Chrome and Safari, but when I try to change the background color in Firefox to anything other than #FFFFFF, the appearance of the dropdown changes drastically. It see ...

Firefox triggers drag events while passing over a div scrollbar

I am looking to create a file drag and drop feature using a styled div: When dragging files over the div, I want the border color to change When dragging files out of the div, I want the border color to revert back to the original In Firefox 35 (Ubuntu) ...

"Stop" and "start" a loop in AngularJS

Feeling a bit lost on how to articulate this inquiry, or even where to start looking for answers. I have a dynamic photo/text feed populating an array, meaning my page is constantly being updated with new information. The influx of data is happening at a ...

Adjusting the orientation of an image using CSS3 depending on the position of the mouse

So I discovered that it's possible to make an image pan left or right using CSS3. Here's an example: HTML <html> <div> <img src="pic.png" class="pan"> </div </html> CSS .pan:hover { margin-right: -50px; } That& ...

Simultaneously Implementing JQuery's fadeIn and Load Functions

Currently, I am utilizing the Jquery load function to refresh specific parts of a webpage. The page loaded by the load function only displays content in the div if certain database parameters are satisfied. However, my issue is that when new content is ren ...

Troubleshooting: Django project not functioning properly post transfer from Windows to Mac

Using Django 3.1.7 on a MacBook Pro now, I recently moved the Django project from a Windows 10 machine. Despite setting up the database and superuser again, running pipenv sync didn't result in serving any of my URLs or Admin page CSS styles. The serv ...

What steps should I take to ensure that my Ngrok domain is functioning properly?

Screenshot of Endpoints I've been facing challenges while attempting to get my NGROK domain operational. Despite completing all the necessary setup steps and successfully running multiple tunnels simultaneously with NSSM, as well as having a business ...

The progress bar for uploading a file is causing issues with the redirect function in the

I am currently facing an issue with my file submission form and progress bar in JavaScript. The progress bar is interfering with the controller, preventing it from redirecting back home with the link. I have tried removing window.location.href="/"; but thi ...

Choose your options effortlessly with CSS or JavaScript dropdown menus

As a novice web developer, I am contemplating whether dropdown menus are more suitable to be coded in CSS or JavaScript. What are the advantages and disadvantages of each approach? ...

confirming the phone field's character count

My website has multiple phone fields, each formatted like this: $("#HomePhoneInput").inputmask({ "mask": "(999) 999-9999" }); $("#WorkPhoneInput").inputmask({ "mask": "(999) 999-9999" }); $("#CellPhoneInput").inputmask({ "mask": "(999) 999-9999" ...

closing the space between rows at the top

Having trouble adjusting the top margin to match the left and right margins between items. How can I narrow the top gap so it aligns with the spacing of each bootstrap button? https://i.stack.imgur.com/1dZEC.jpg html <div ng-controller="RecipeCo ...

Bootstrap 4 image gallery with thumbnails sizing

I'm facing an issue with my responsive image gallery that has only 6 thumbnails. Everything looks great on large and medium devices, but in mobile view, the thumbnails appear too small. Adding padding doesn't work as it breaks the side margins al ...

How can you modify the HTML tags before Bootstrap overrides them?

Imagine having a code snippet like this: <style> #container ul li{ font-size:50px;} .myclass1 ul li{ font-size: 20px;} </style> <div id="container"> <ul> <li> <div class="myclass1"> ...

Incorporate JavaScript functionality with HTML dropdown lists

I am attempting to achieve the following: The user can choose between "Option One" or "Option Two". If they select "Option One", the result will be 66 + 45, and if they select "Option Two", the result will be 35 + 45. How can I make this work using a com ...