This is the html of what I want to hide
<div class="count">
<div class="number">1</div>
<div class="text">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" 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"
Try with
.count {
display: none!important;
}
body.page-id-750 div.count {
display: none!important;
}
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?
Related
I would like to remove the following from the HOMPE PAGE ONLY!
I have access to page editor but not sure what to insert in the CSS editor on that page.
I want to remove the below:
<div class="fs_img_header header_video_fs_view" style="width: 1028px; height: 789px;"><div class="stat_img_cont" style="background-image: url();background-size: cover;background-position: center center;"></div></div>
.fs_img_header, .header_video_fs_view, .stat_img_cont {
display: none;
}
if you're using Wordpress and the css has no effect:
.fs_img_header, .header_video_fs_view, .stat_img_cont {
display: none !important;
}
To display it only on the homepage use following plugin (easy-way):
https://de.wordpress.org/plugins/css-javascript-toolbox/
With this plugin you can choose where it displays your custom css (in this case the homepage).
Let me know if this helps.
I basically wanted to know how I could remove the button in the top right of this website . I could not find the actual button within the CSS of the website, so I will have to result to this. Anyone has an idea?
add this css to hide it
#genesisexpo_button_5dca4f5d12381 {
display: none;
}
if you need to hide it on home page only please add bellow code
.home #genesisexpo_button_5dca4f5d12381 {
display:none;
}
.home .header_button .genesisexpo_module_button a {
display: none;
}
can try this , this is only to hide on home page
I am trying to hide the header and footer from a specific page on my website. I am using a theme I downloaded online. The specific page I am trying to hide is http://ai-home.com/dsme/
I installed a custom CSS plugin so that I can customize the CSS on this page. I inspected the page element and can see that I am most likely trying to hide the
div id="header-space" and div id="footer-outer"
After reading online I think the code should be
.page-id-5321 .site-header, .page-id-5321 .site-footer {
display: none;
}
or
.page-id-5321 .site-header-space, .page-id-5321 .footer-outer {
display: none;
}
When I publish, I do not see any changes to the page. I am not a developer so I want to make this edit as easily as possible without it affecting the rest of my website.
EDIT:
tried some suggestions and was able to fix most of the problem, but now I am stuck with a big grey bar on the bottom but I can't find it via inspect element.
EDIT#2: So the CSS looks like this right now, but still stuck with a grey bar on the bottom
#header-outer { display: none;}
#header-space { display: none;}
#footer-outer { display: none;}
Use the visibility property as hidden.
Like [ visibility:hidden ]
In your header class/id.
Please try below code for removing header-outer, header-space and footer-outer
.page-id-5321 #header-outer, .page-id-5321 #header-space, .page-id-5321 #footer-outer {
display: none;
}
I think if you use wordpress, in your specific page can use other header or/and other footer.
Change
get_header();
to
get_header('<other header file>');
same with footer
Try it
<div id="header-space" class="hide">xyz</div> and <div class="show" id="footer-outer">abc</div>
csscode:
.hide{display:none;}
.show{display:block;}
If you need to hide a block/section then just add class:hide to HTML OR for showing use class name show like mention above.
Hope it will work. Revert if it is not.
For grey bar solution
#footer-outer #copyright, body {
border: none!important;
background-color: #f8f8f8!important;
}
By changing the color of footer you can use the same background.
I have question regarding . I am using wordpress and create a new page then under that page i am using the and pass a url by attribute src. So the is working fine and url's page is showing in it. Here i have to remove some part of html from and i try to hide them on firebug, they hide there easily but not working when i apply my css to styelsheet file.
My css is not loads/works on , please suggest me a solution so that i can make my page comfortable.
#iframeBody iframe#contentArea {
height: 100%;
left: 0;
width: 100% !important;
}
#iframeHeader iframe#banner {
display: none;
}
#iframeBody iframe#menuItem {
display: none;
}
iframe#menuTab {
display: none;
}
<iframe src="http://freightforce.com/MainFrame.aspx?id=Customers_horz_accordion.aspx" width="100%" height="1000px"></iframe>
Thanks.
I'm embedding a page that hosts a silverlight application inside an IFRAM inside my html page. now I'm trying to display a div over the IFRAM (containing the silverlight page) using z-index but the div is always hidden under the silverlight content. how can I achieve this?
Note: if I embed another page that doesn't use silverlight everything works fine.
It's hard to say without code but something like this should do it. Remember, when working with z-index, you have to have position explicitly set.
Also, you can actually target and style iframes like this:
<style>
.iframe-wrapper iframe {
display: block;
position: absolute;
z-index: 0;
}
.foo {
display: block;
position: absolute;
z-index: 1000;
}
</style>
...
<div class="iframe-wrapper">
<iframe ... />
</div>
<div class="foo">bar</div>