Modern Events Calendar styling

Support
#1

I am wondering if you could help on a couple of issues I have please as I have demonstrated on http://modbury.church. The calendar is half way down on right. I am using MEC-ID 11 shortcode which suits our needs.

  1. If you click on January 28th you will see that there are a number of events being displayed. Is it possible to move this column further up in its container, so that the “Events for January” is towards the top of the column. This will allow us to have the six events

  2. You will see that the blue box surrounding the date is not large enough and the date is overlapping the box. Is it possible to increase the size of the box, or is there some other trick to sorting this issue.

3.On all of our events, we will not want to display the End Time. Is there a global setting or code that can be used to save us having to check this box on each event?

At the bottom of the calendar container, is it possible to remove the grey footer strip?

Lastly, whenever I click on an event I am getting a 404 page not found error. Have I omitted something?

Many thanks for your valued help

#2

Hello There,

Thanks for writing in!

1.) Do you want something like this?

If that’s the case, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.mec-calendar .mec-calendar-events-side .mec-table-side-title {
    margin-top: 0;
}

2.) Could you please guide us to the correct page or provide some screenshot so that we will have an idea how it looks? Because I am seeing exactly like the screenshot above.

3.) If you do not want to check the end time, it would mean that you are having an All day event. For more details please see this documentation.

4.) To remove the grey footer strip or border and maybe if you would like to lessen that spaces in between, please use this code:

.mec-calendar .mec-event-article {
    border: none;
    padding-top: 10px;
    padding-bottom: 10px;
}

5.) This issue could be because of the slug conflict. I am not just sure yet. Would you mind providing us access to that we can take a closer look?

Thanks.

#3

Hello There,

Thanks for providing the access. Just as I predicted, there is indeed a slug conflict.

MEC slug:

Events category:

You will have to edit one of them to prevent the conflict. After that, the 404 issue should be resolved.

Please let us know how it goes.

#4

Thank you so much, I had changed the category to avoid the conflict but had missed this change.

I am still having a couple of issues with the formatting, and cannot see any knowledgeable articles to help.

If I set the column to full width, then the side-events and title column to nicely position at the top, in line with the previous/nest month. This means that when we have six events, they sit nicely on the page. However, if I set the column to 2/3rd width which is what I want, the side-events and title column is being forced down, and so if we have six events, the last three and well below the actual calendar grid. i have tried the code you supplied by that did not seem to make any difference.

Also, how do I go about formatting the actual event page ?

many thanks for your continued help

#5

Hi there,

Would you mind setting the calendar to this setting so that we can check it? There must be some custom CSS that is overriding the values of the CSS which we can adjust.

This depends of the amount of customization you want to add on the page. The single event pages are formatted through the theme files which you can override using the child theme. But if you want to change minor stuff like font sizes, and colors, it should be doable by custom CSS.

#6

Thanks have reset the calendar to 2/3 page setting

#7

Hi there,

I can change the columns through the code, x-1-1 and x-2-3, and it looks the same no matter how the columns structure are applied. Perhaps you can see screenshots of before and after changing from full-width to 2-3 columns?

Thanks!

#8

Attached two files at 3/3 and 2/3

#9

Hi There,

I can’t replicate the issue because there are only 2 events at the moment.

When the column (right) gets narrower its text content will be wrapped resulting in the column expanding its height, making it taller.

The calendar (left) on the other hand is responsive when its column gets narrower it’s getting smaller too while maintaining its aspect ration (1:1 square). So it’s not only the width but the height reduce as well.

With that said its normal that you get that result on your second screenshot, right column getting taller and the calendar getting shorter/smaller.

Cheers!

#10

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