skip to Main Content

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.

CSS files being loaded

2

Answers


  1. I added identical code in the Chrome DevTools and it worked (i.e., Shopify Forms Powered by HulkApps disappeared).

    Two questions:

    1. Is this the only thing you have inside the core.css?
    2. I’m not familiar with Shopify, but in Magento 2 sometimes CSS doesn’t work because of the cache. Have you cleared the cache?

    UPDATE

    1. I see you have a lot of code inside the core.css. Everything else works? Is this display: none; the only thing that doesn’t?
    2. I see that p.hulk-powered-wrapper{display:none !important} is inside the core.css so the problem shouldn’t be related with the cache.
    Login or Signup to reply.
  2. Looks like that p tag is inside an iframe, so maybe try something like this (with jQuery):

    $("#frame_ai7L9yHu4aWawvcQdO6NJw").contents().find(".hulk-powered-wrapper").hide();
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search