Calendar widget not resizing to container block

http://jessicapaul.eu/home-v1

Hi, I am trying to get the Events+ calendar widget to display to the correct size on the screen...

I am using a child theme of 2012 provided by "Ultimate Brainstorm" who also provide the Visual composer add-ons...and also using "sidebar pro" in order to create multiple sidebar widgets.

When I create three columns on the page and add in the Events+ calendar widget. The widget displays across the whole screen and does not resize to the column width. In fact if I duplicate the widget across the three columns, they just stack on top of one another..

I am really desperate now and am seriously thinking about ditching this and advising the client to go elsewhere..I have tried several themes now with this Events+ plugin and just get conflict after conflict... this theme seems to have the least of all of them. If I can crack this problem of the calendar views not resizing I am in with a chance.

I also have a problem with the {eab_calendar} shortcode also not resizing ... It looks great on full page view,,but if I try to post it into a 1/2 page view, it still displays full page.

  • aristath

    Hello there @john paul, I hope you're well today!

    When I create three columns on the page and add in the Events+ calendar widget. The widget displays across the whole screen and does not resize to the column width. In fact if I duplicate the widget across the three columns, they just stack on top of one another..

    The problem is that the theme you're using creates 3 wrapper divs with classes like vc_col-sm-4 but does NOT add any css styling for these classes. As a result, they are simply divs without any styles to make them columns.
    You could try adding some CSS like this:

    div.vc_col-sm-4 {
      width: 30%;
      float: left;
      margin: 1.5%;
    }

    That should make them 3-columns...
    I would recommend you use this plugin to add your custom CSS: https://wordpress.org/plugins/simple-custom-css/

    I am really desperate now and am seriously thinking about ditching this and advising the client to go elsewhere..I have tried several themes now with this Events+ plugin and just get conflict after conflict... this theme seems to have the least of all of them. If I can crack this problem of the calendar views not resizing I am in with a chance.

    The Appointments+ plugin seems to be doing its job fine here... echoing the calendars.
    The columns are not related to this plugin... This is clearly an issue with either the theme, the visual editor, or the combination of these 2.
    The visual editor should add that custom CSS yet it does not, so I would bet that's where your issue is.

    I also have a problem with the {eab_calendar} shortcode also not resizing ... It looks great on full page view,,but if I try to post it into a 1/2 page view, it still displays full page.

    The [eab_calendar] is a shortcode that does not resize by default. Just like before that's the job of your visual editor. Could you please post a link to that page so that I may see this in action and provide you with the CSS that the editor fails to add so that this works as expected?

    Please advise,
    Ari.

  • aristath

    Hello again!

    Once again, the visual editor you're using simply does not output any CSS.

    This should fix both this and the above issue:

    div.vc_col-sm-4 {
      width: 30%;
      float: left;
      margin-right: 3%;
    }
    
    div.vc_col-sm-6 {
      width: 47%;
      float: left;
      margin-right: 3%;
    }
    
    div.vc_col-sm-6 .wpmudevevents-list {
      padding: 0;
    }

    You can add that using the options of this plugin: https://wordpress.org/plugins/simple-custom-css/

    I hope that helps!

    Cheers,
    Ari.

  • john paul

    Can I apologise, wholeheartedly, with reverence and painful embarrassment. I have completely wasted your time due to my stupid and idiotic mistake.

    I am an incompetent baboon with no more brain cells than a retarded amoeba.

    I had unwittingly changed the settings in Visual Composer to disable the CSS file in favour of a Custom CSS file which of course was non-existent.

    I am off to punish myself by flogging myself repeatedly with a stick of limp celery whilst watching a box-set of Nordic Soap Operas...

    can you forgive me??

  • aristath

    Hello again!

    Ahahahaha, I had no idea that plugin had such an option!

    It's all good, I'm glad you managed to figure this one out!
    It seems everything is working fine now. :slight_smile:

    I'll just go ahead and mark this thread as resolved.
    If however you need any further assistance then please don't hesitate to open a new thread in these forums and we'll do our best to help out!

    Take care,
    Ari.