Css conflict in M.E calendar

Support
#1

https://wordpressmu-110049-1087249.cloudwaysapps.com/callander/

Hi

The above classic calendar has an issue where the event titles do not fit in the box.

I’m using the gym theme demo.
is there a conflict? I’m a novice user but I doubt the plugin has this trouble out the box, and I know it’s bundled so the plugin is bundled with x so it has been vetted byy you guys. So I’m guessing it’s the css included with the demo site but I have no knowledge on the topic.

I hope you don’t mind having a look for me please?

Thanks

Ben

#2

Hello Ben,

Thanks for writing in! I have checked the page and I see the issue. To resolve this issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.mec-timetable-t2-content .mec-event-title a,
.mec-timetable-t2-content .mec-event-title  {
    overflow: visible;
    white-space: normal;
    margin-top: 0;
}

We would love to know if this has worked for you. Thank you.

#3

Hi thanks,

It looks a lot better! the bottom is slightly out now but it looks a lot better.

I tried to add

margin-bottom: 5;

To the script that you gave to me but it did not have the desired effect so I inspected element and found:

<article class="mec-event-article ">
        <span class="event-color" style="background: #e14d43"></span>            <div class="mec-timetable-t2-content">
            <h4 class="mec-event-title">
                <a class="mec-color-hover" data-event-id="189" href="https://wordpressmu-110049-1087249.cloudwaysapps.com/events/singdam-warriors-thai-boxing/">Singdam Warriors Thai Boxing</a>
                                </h4>
            <div class="mec-event-time">
                <i class="mec-sl-clock-o"></i>
                                    <span>6:00 pm - 7:30 pm</span>
                                </div>
            <div class="mec-event-loction">
                <i class="mec-sl-location-pin"></i>
                                </div>
            <div class="mec-event-organizer">
                <i class="mec-sl-user"></i>
                                        <span>Sam Gilfeather</span>
                                </div>
        </div>
    </article>

Is: <article class="mec-event-article "> what I need to target? If so how do I write it in the same format you used please?.mec-event-article?

Thanks for your help, really kind of you

Ben

#4

Hi Ben,

It seems that the CSS code you have added is incorrect.

CSS values other than 0 should have a unit. So try adding:

margin-bottom: 5px;

Instead of just 5.

Let us know how it goes.

#5

Hay, I’m learning!
I tried this:

.mec-event-article {margin-bottom: 5px;
}
.mec-timetable-t2-content .mec-event-title a,
.mec-timetable-t2-content .mec-event-title  {
    overflow: visible;
    white-space: normal;
    margin-top: 5px;
    margin-bottom: 15px;
}
$el.points-counter >div.x-counter-after {
  margin-left: 20px !important; /*Adjust this value accordingly*/
}

$el.points-counter >div.x-counter-before {
margin-right: 20px !important; 
}

$el.points-counter >div {
  display: inline-block !important;
}

But it appears that I am targeting the wrong element, I need to expand the coloured boxes to fit all the text in, but also make sure all the boxes are the same size, any idea which element to target and I guess the command is going to be “max-height”?

Thanks for all your help, I’m sure you must be very busy!

Thanks

Ben

#6

Hello Ben,

Kindly update the code and use this instead:

.mec-event-article {
  margin-bottom: 5px;
}

.mec-timetable-t2-content .mec-event-title a,
.mec-timetable-t2-content .mec-event-title  {
    overflow: visible;
    white-space: normal;
    margin-top: 5px;
    margin-bottom: 15px;
}

.points-counter >div.x-counter-after {
  margin-left: 20px !important; /*Adjust this value accordingly*/
}

.points-counter >div.x-counter-before {
  margin-right: 20px !important; 
}

.points-counter >div {
  display: inline-block !important;
}

We would love to know if this has worked for you. Thank you.

#7

Hi

I changed the sctipt to yuor new one but it has not had the desired effect.

As far as I can see the difference in the script is just the spacing in the .mec-event-article command.

I’ve tried playing with the different components of the element and setting “min-height” to them but although I can get the boxes to enlarge the text still gets cut off withing them

As you can see the location and organiser (instructor holding the event) are still being cut off within the box, even though I made the box bigger, am I targeting the wrong component?

Thanks

Ben

#8

Hello Ben,

To resolve your issue, please add this custom css code as well:

.mec-timetable-wrap .mec-event-article {
    min-height: 180px;
}

.mec-timetable-wrap .mec-timetable-t2-content {
    height: 180px;
}

Feel free to increase the value if needed.

#9

RueNel

Thank you so, so much, it has worked! My I ask how you identified that the " .mec-timetable-wrap .mec-event-article" and " .mec-timetable-wrap .mec-timetable-t2-content"

needed to be targeted? I spent a good hour trying to fix this before I asked you to fix it for me.
So there are two “.” commands in a row, so buuy useing “.mec-timetable-wrap .mec-event-article” are we targeting two different propperties to have the same styling by writing
" .mec-timetable-wrap .mec-event-article {
min-height: 180px;
}" ?

I hope you don’t mind explaining further? As I was thinking that I only needed to target one thing to get the componant to behave the way I needed but by looking at the script that was not the case.

.mec-event-article {
  margin-bottom: 5px;
  min-height: 150px;
}

.mec-timetable-t2-content .mec-event-title a,
.mec-timetable-t2-content .mec-event-title  {
    overflow: visible;
    white-space: normal;
    margin-top: 5px;
    margin-bottom: 15px;
}
.mec-timetable-wrap .mec-event-article {
    min-height: 180px;
}

.mec-timetable-wrap .mec-timetable-t2-content {
    height: 180px;
}

In fact that is a hell of a lot of code just to make some boxes the right shape.

When looking to learn CSS a lot of the resources teach you to build from scratch but do you know of anything that teaches you how to manipulate in the way in which we are doing hear? It would be great to understand why what we have just done works the way it did, and why the plugin was effected like this, I doubt the plugin behaves like this “out of the box”

Thanks

Ben

#10

Hello Ben,

The plugin indeed behave like that. The css given were just an override to adjust the default values.
You might find these links helpful, please check out the following:

Regards.

#11

hi

Thanks, Can I get those links please?

Thanks

Ben

#12

Hey Ben,

Sorry the links where broken:

Hope this helps.

#13

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