Question 165079 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can I reset the width in CSS for WordPress?

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?

Tags:

2

Answers


  1. 0

    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%;
     }
 }
    Login or Signup to reply.
  2. 0

    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%;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search