CSS to Hide by Class or ID Not Working

Support
#1

I am trying to hide the two bottom fields but the top-level CSS override does not appear to be working for some reason.

https://verobeachchristmasparade.org/parade-entry-form/

The Pay Pal and Check Payment Amount fields I would like hidden.

#nf-field-42-wrap {display: none;}
#nf-field-43-wrap {display: none;}

.nf-field-42-wrap {display: none;}
.nf-field-43-wrap {display: none;}

#nf-field-42 {display: none;}
#nf-field-43 {display: none;}

.nf-field-42 {display: none;}
.nf-field-43 {display: none;}

#2

Hello @verobeachmarketing,

Thanks for writing in!

The use of ID in CSS will highly be used than the class selector. If none of it works, you can add !important.
Example:

#elementID {
   display: none;
}

.element-class {
   display: none;
}

.custom-class {
    display: none !important;
}

#elementID.element-class.custom-class  {
   display: none !important;
}

Best Regards.

#3

I am using both ID and class and I had tried !important I went ahead and put it back on with no luck. My issue is really that I do not see the CSS showing in the source when inspected.

#4

Hello @verobeachmarketing,

I checked your given page URL and the custom CSS code you have added is not rendering at the moment, it might be due to a cache or CSS syntax error. I would suggest you please make sure you have purged all the server cache and check it CSS syntax error from CSSLINT

If it doesn’t work, we need to check your settings. I would request you, please share your details in a secure note. Please provide the following details meanwhile you must troubleshoot a few common issues before we investigate your settings.

  • WordPress Login URL
  • Admin-level username and password

You can find the Secure Note button at the bottom of your posts

secure-note
secure-note1040×250 15.3 KB

Thanks

#5

Hey @verobeachmarketing,

Upon checking, you haven’t added any CSS to the Code Editors. To test your claim, I added a sample custom CSS to hide the field of your 3rd party form and it works.

The purpose of the sample is to show that Pro’s Code Editor works. With that said, it is your custom CSS that has the issue. Please reach out to the 3rd party plugin author to learn more how to override the fields properly.

If you need customization guidance from us, please consider subscribing to One Premium Support where we can answer your customization questions.

If you need hands-on help, you can get block of hours from our Elite team here: https://theme.co/elite

image

2022-10-25_16h38_16
2022-10-25_16h38_161528×640 142 KB

Hope that helps and thank you for understanding.

#6

Screen Shot 2022-10-25 at 9.47.44 AM
Screen Shot 2022-10-25 at 9.47.44 AM1342×3302 231 KB
I am using the top-level CSS override. I am using the exact same CSS as you are. Of course, it works if you do it in inspect.

#7

Hello @verobeachmarketing,

Please make sure to add your custom CSS code in the correct place. Your custom css may not be taking effect because it does not override the default settings. Please be familiar with how the order of the css is applied to a page. This is the order:

  • Stack Style.css

  • Child theme’s style.css

  • WordPress Additional CSS

  • X default Settings

  • X > Custom CSS (Customizer’s custom css)

  • Cornerstone’s page custom css

  • { and if the plugin styles is loaded here, another method like adding a container ID and/or !important should be added to your custom CSS code }

Meanwhile, I have checked the demonstration made by @Christian. He added a custom CSS code in the page builder and it is working on the live view of the page.

Builder Preview:

Screen Shot 2022-10-27 at 8.41.12 AM
Screen Shot 2022-10-27 at 8.41.12 AM1938×1466 177 KB

Live preview of the page inspection:

Screen Shot 2022-10-27 at 8.44.59 AM
Screen Shot 2022-10-27 at 8.44.59 AM2460×1572 345 KB

Best Regards.

#8

I am using !important

I always use this CSS option and never had an isssue, was something changed int he most recent version?

#nf-field-42-wrap {display: none !important;}
#nf-field-43-wrap {display: none !important;}

.nf-field-42-wrap {display: none !important;}
.nf-field-43-wrap {display: none !important;}

#nf-field-42 {display: none !important;}
#nf-field-43 {display: none !important;}

.nf-field-42 {display: none !important;}
.nf-field-43 {display: none !important;}

#nf-field-42-container {display: none !important;}
#nf-field-43-container {display: none !important;}

.nf-field-42-container {display: none !important;}
.nf-field-43-container {display: none !important;}

#9

Hello @verobeachmarketing,

If you look back and check the screenshot in my previous reply, only the following class and ID is applied to the elements:

  • ID: nf-field-42-container with class nf-field-container
    – #nf-field-42-container is effective than .nf-field-container or #nf-field-42-container.nf-field-container

  • ID: nf-field-42-wrap with class field-wrap

  • ID: nf-label-field-42

Therefore, in your code only the following should work:

#nf-field-42-wrap {display: none !important;} 

#nf-field-42-container {display: none !important;}

Hope this makes sense.

#10

Yes, I get that, but why isn’t the CSS override working? I have your code in my code, I realize there is extra but it isn’t harming anything none of it shows in source.

#11

Hi @verobeachmarketing,

Where did you added the CSS override? Please check out the demo video below to demonstrate how I manage to get the custom CSS working. I am using this custom CSS to see the borders:

#nf-field-42-wrap {
/*   display: none !important; */
  border: solid 1px red;
} 

#nf-field-42-container {
/*   display: none !important; */
  padding: 10px;
  border: solid 1px yellow;
}

May we request that you create a demo video as well with your custom CSS and how you inserted the code so that we will have an idea of what you might have missed or cause why your custom CSS is not working.

Best Regards.

#12

Screen Shot 2022-11-07 at 8.34.22 AM
Screen Shot 2022-11-07 at 8.34.22 AM2292×1402 225 KB

#13

Hey @verobeachmarketing,

Please re-read my response here: CSS to Hide by Class or ID Not Working

Pro is not the problem. It is your custom CSS that is the issue. I even inserted Ninja Forms CSS in the Page CSS to show you that the Pro’s Code Editor works. I did not add CSS in the browser inspector. It was just to show you that the code added in the Page CSS works.

Now, what you’re wanting us to investigate is your code NOT the Page CSS. I mentioned previously that is beyond the scope of our theme support.

Thank you for understanding.