Modern Events Calendar - Calendar Width

Hello,

I have installed the Modern Events Calendar extension and am hoping to use the full calendar shortcode on the ‘Event Calendar’ page of the site.

My goal is to have the calendar take up half the row and the event details taking up the other half, at least large laptops, desktops and larger monitors. Unfortunately, however, the calendar is taking up closer to 30% of the row’s width, with the event details filling out the rest.

You can see what I am talking about at https://austinparks.wpengine.com/event-calendar/

Username: demo
Password: austin

For what it’s worth, you’ll likely notice that as the page is loading, the layout is temporarily as expected, however when the page fully loads, the calendar half of that section is smaller than the right half.

Any feedback here is very much appreciated.

Hello @itstimetx,

Thanks for asking. :slight_smile:

You can add following CSS under Pro > Theme Options > CSS to make necessary changes in MEC layout:

.mec-calendar .mec-calendar-side {
    width: 50% !important;
}

.mec-calendar .mec-calendar-events-side {
    width: 50% !important;
}

.mec-calendar .mec-calendar-topsec {
    width: 100% !important;
}

.mec-skin-monthly-view-month-navigator-container {
    display: inline-block;
}

.mec-calendar-table {
    display: inline-block;
}

Thanks.

Thanks very much for the quick response! This almost did the trick, but the calendar is not yet filling the space fully. You’ll notice that it does briefly while the page is loading but still ends up smaller. Additionally, on large screens, the month now sites to the left of the calendar (see screenshot)

Hi @itstimetx,

Please also add the CSS code below after the previous suggested code:

@media (min-width: 767px) {
 .mec-wrap.mec-sm959 .mec-calendar:not(.mec-event-calendar-classic):not(.mec-calendar-weekly) dt {
    width: 100px;
}   
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

If you still need our help for the smaller screens you will need to get back to us with the URL/User/Pass of your website using a Secure Note.

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.