How can I Reset the Width in CSS?-CodePudding

I am having a problem with some new CSS due to an update of our plugin. The page in question is here: https://www.renophil.com/event/ghostbusters-in-concert/

Basically from the title below the image down to the share icons should be a left column. Then the description that starts with "Kick off your Halloween weekend..." should be a larger right column.

We are using Wordpress and Visual Composer. The left column uses the class of vc_col-sm-4 and the right uses vc_col-sm-8. These are set to have the correct widths and work on mobile devices.

.vc_col-sm-4 {
    width: 33.33333333%;
}

.vc_col-sm-8 {
    width: 66.66666667%;
}

The problem is that the plugin we use for the events (The Events Calendar) has this CSS rule:

.tribe-events-single>.tribe_events>:not(.primary,.secondary,.tribe-events-related-events-title,.tribe-related-events) {
    order: 1;
    width: 100%;
}

which is overriding the width of my columns mentioned above. I thought I could fix it with width:auto but it didn't work. Is there a way to cancel it or do I have to add !important to the .vc-col-sm-4 and .vc-col-sm-8 code?

CodePudding user response：

Try adding specificity to the classes controlling the widths when that overriding events class is present. This should help get you in the right direction.

@media (min-width: 768px) {
.tribe-events-single>.tribe_events .vc_col-sm-4 {
    width: 33.33333333%;
}
.tribe-events-single>.tribe_events .vc_col-sm-8 {
    width: 66.66666667%;
}
}

CodePudding user response：

The CSS rule:

.tribe-events-single>.tribe_events>:not(.primary,.secondary,.tribe-events-related-events-title,.tribe-related-events) {
    order: 1;
    width: 100%;
}

has a greater DOM precision and has priority. You can use !important as you said:

.vc_col-sm-4 {
    width: 33.33333333% !important;
}

.vc_col-sm-8 {
    width: 66.66666666% !important;
}

or add Additional CSS from the theme preview mode and target the id element #tribe-events-content

div#tribe-events-content div.vc_col-sm-4 {
    width: 33.33333333%%;
}

div#tribe-events-content div.vc_col-sm-8 {
    width: 66.66666666%;
}