CSS minification plugin conflict

  • Hi,

    I am having a plugin conflict with the Botiga theme and Events Calendar. The CSS minifcation is narrowing some of the content in the calendar, making it look terrible. I reached out to the developers of the plugin and they said the following class was being added to the events blocks:

    post-align-center post-vertical-align-middle col-lg-4 col-md-4

    I am also running WP Rocket, but it is not causing this minification issue as far as I can tell. I see that the Botiga theme automatically minifies CSS – is there a way to exclude this plugin from the minification/optimization?

    When I initially navigate to the page, the content is squished, but if I select the Month View in the calendar and back again, it resolves itself. Not sure why it would do that.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi,

    Thank you for reaching out to us.

    I reached out to the developers of the plugin and they said the following class was being added to the events blocks:
    post-align-center post-vertical-align-middle col-lg-4 col-md-4

    Upon checking, I don’t find those classes in your page.

    I am having a plugin conflict with the Botiga theme and Events Calendar.

    If that the case, to verify whether Botiga breaks the layout of events calendar, you may try switching to one of default WordPress themes. To run this check privately without affecting your site’s visitor, try enabling Troubleshooting mode with the help of this plugin: https://www.ads-software.com/plugins/health-check/.

    Thread Starter torrielynn

    (@torrielynn)

    I’ve run the troubleshooting and it looks like it is Botiga theme that is breaking the layout of the Events Calendar plugin. It functions fine on the TwentyTwenty theme but goes back to being narrowed with Botiga.

    Hi @torrielynn,

    Thank you for getting back.

    I did further checking with my test site and I found the CSS class added by the theme that causes layout issue with Events Calendar when list view mode is active by default.

    We’ll added this into our radar and the permanent fix will be added in upcoming version update of the theme.

    At the time being, you can fix it yourself with this simple CSS code:

    @media only screen and (min-width: 768px) {
  .tribe-events-calendar-list .tribe-events-calendar-list__event.col-lg-4 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;    
  }
}

@media only screen and (min-width: 992px) {
  .tribe-events-calendar-list .tribe-events-calendar-list__event.col-lg-4 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;    
  }  
}

    If you can access Customize menu under Dashboard > Appearance, add it to Customize > Additional CSS.

    Hope that helps. ??

    Thread Starter torrielynn

    (@torrielynn)

    Hi there,

    Thanks for the code! I’ve added it to my site, but it inlines everything into one column, the image included. My client wanted the layout to appear like this:

    https://drive.google.com/file/d/1EorInkFr0RrmwPEehz0uGKLVt6Rq2yAl/view?usp=share_link

    Is there a way to have the 2 columns still active but not squished? The above is how it appears in the backend when I am adding CSS, but appears like so in all other windows:

    https://drive.google.com/file/d/1p8k0NlDzzKR6I41wdtavN7wvfCAn1K7e/view?usp=sharing

    Also, I inspected the elements after applying the CSS you provided. In Dev Tools the flex property is grayed out and let me know that the flex property has no effect as the parent property is set to display:block.

    Any idea how I can get the end result to look like the first screenshot?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS minification plugin conflict’ is closed to new replies.