Styling issue with tables on site

[gignnn]

Hello,

I am having a styling issue with two tables on my website. They can be found at the following URLs:

(1) https://nnnproperties.staging.wpengine.com/available-properties/national-nnn-listings-database/

(2) https://nnnproperties.staging.wpengine.com/client-resources/tenant-credit-ratings/

In order to style the first table (1) to span beyond the margins at a smaller font, I added the following code to my custom CSS:

@media (min-width: 1530px){
 .dataTables_wrapper. {
zoom: 0.70;
width: 126%;
margin-left: -206px;
}
}

Unfortunately, that code is affecting the styling of table (2), which I don’t want it to do. I tried separating the CSS by their DIV IDs, but it’s not working for me. Do you have a solution so that the custom code above only affects table (1) and not table (2)? Thank you!!

[paul.r]

Hi,

You can add an unique class to your section then use it to target your datatable

eg. Add my-section as id

You can then change your code to this

@media (min-width: 1530px){
.my-section .dataTables_wrapper {
zoom: 0.70;
width: 126%;
margin-left: -206px;
}
}

Hope that helps.

[gignnn]

Thanks. Unfortunately, that didn’t work. Can you show me where I am supposed to put the “my-section” ID? I put it in the shortcode as id=“my-section”:

[cs_section id="my-section" bg_color="#f8f8f8" parallax="false" style="margin: 0px;padding: 65px 0px;"][cs_row inner_container="true" marginless_columns="false" style="margin: 0px auto;padding: 0px;"][cs_column fade="false" fade_animation="in" fade_animation_offset="45px" fade_duration="750" type="1/1" style="padding: 0px;"]
[gdoc key="https://docs.google.com/spreadsheets/d/1i_DLgXiEgIS222lWlx9F0f7ocCz4FVknAM978VJaJtU/edit?usp=sharing"][/cs_column]
[cs_section parallax="false" style="margin: 0px;padding: 0px;"][cs_row inner_container="false" marginless_columns="false" style="margin: 0px auto;padding: 0px;"][/cs_row][/cs_section]

Thanks.

[friech]

Hi There,

Sorry for the typo, If it is an ID then the code should be:

@media (min-width: 1530px){
	#my-section .dataTables_wrapper {
		zoom: 0.70;
		width: 126%;
		margin-left: -206px;
	}
}

Notice the # that for ID and . is for class.

CSS Selector Reference

We like to continue on helping you on this, but if the issue persists, please contact the plugin author/support.

Cheers!

[gignnn]

That fixed it, thanks!

[friech]

We are delighted to assist you with this.

Cheers!