How can I Reset the Width in CSS?

October 21, 2022

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?

>Solution :

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%;
}
}