How to ignore the specific CSS codes coming from the WordPress plugin stylesheet?

Question

I am working on a WordPress website built on custom theme in which I want to ignore some specific CSS codes coming from wordpress plugin style sheet.

Answer 1

Solution 1:

I would first locate the wp_enqueue_style() in the plugin itself to identify the stylesheet handle. Let's say the enqueue in the plugin is as follows:

wp_enqueue_style('gravityview_style_default_table', 'path-to-file.css', [], '2.1.0.3');

In your theme than you would need to wp_deregister_style() refering to the same handle, and create a new stylesheet 'gravityview-style.css' in your theme with the css you want from that plugin stylesheet as follows:

function manage_theme_styles() {
  wp_deregister_style( 'gravityview_style_default_table',); 
  wp_enqueue_style( 'my-gravityview-style', get_template_directory_uri() . '/gravityview-style.css', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'manage_theme_styles', 99 );

Having said that every time you update the plugin you have to check the plugin's css and update your stylesheet with any changes made to the plugin. But since you are dealing with a plugin you have to check your css even if you choose to tackle your problem with other solutions.

Solution 2:

As others have suggested in other answers, you could also just add the styles in your theme stylesheet with the media queries you do not want. I would avoid using the !important since this might create issues in future styling, instead you can be more specific when referring the elements in your css as follows:

@media screen and (max-width: 575.98px) .gv-table-container.gv-container .gv-table-view tr:first-of-type 
{
  border-top: none;
}

@media screen and (max-width: 575.98px) .gv-table-container.gv-container .gv-table-view tr {
  padding: 0;
}

.gv-table-container.gv-container .gv-table-view th, .gv-table-container.gv-container .gv-table-view td {
  display: block;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding: 0;
} 

@media screen and (max-width: 575.98px) .gv-table-container.gv-container .gv-table-view tr td {
  display: block;
}

@media screen and (max-width: 575.98px) .gv-table-container.gv-container .gv-table-view tr td:before {
  content: 'Year Submitted';
  text-align: left;
}

I see that you have some styling referring to .gv-container-2777. I don't know if this has been done by the plugin itself or you added that styling. When you refer to elements in your css with ids, it means that every time you create a new table with a different id you have to go through your stylesheet and duplicate your css to be applied to .gv-container-2778. If you use constant classes you would avoid duplicate code and extra work since everything will be styled automatically.