I have a <p>
element which I wish to remove by display:none
. I am adding the following code in the main CSS file (core.css
). This file is getting referenced on all pages as per the Network tab. Also, in Inspect Element I see the code for this particular element is coming from inline styling, which isn’t part of any asset file on Shopify Code Editor, and cannot be edited as a result. What is the way out here?
Code I am adding to core.css
:
p.hulk-powered-wrapper {
display:none !important;
}
Page in question: https://shop.rallyappliances.com/pages/contact
Upon further investigation, I found that the only CSS file that is able to edit this element (where adding the following code works) is an external stylesheet from the app developer’s website. However, given as the HTML is finally on my website, doesn’t it mean I should have a master CSS which overrides the external CSS? In the screenshot I have marked which CSS file being loaded is able to make this change.
2
Answers
I added identical code in the Chrome DevTools and it worked (i.e., Shopify Forms Powered by HulkApps disappeared).
Two questions:
core.css
?UPDATE
core.css
. Everything else works? Is thisdisplay: none;
the only thing that doesn’t?p.hulk-powered-wrapper{display:none !important}
is inside thecore.css
so the problem shouldn’t be related with the cache.Looks like that p tag is inside an iframe, so maybe try something like this (with jQuery):