Help! MEC Calendar event page background color changes to black in tablet and mobile view

I have another issue with a separate site that I need addressed right away for a client.

The MEC calendar event pages are displaying a black background when viewed in tablet and mobile size. This black background makes it hard to see the black text.

Also the image next to the location is displaying a broken image icon. I’m not sure why that is.

I inspected my css and couldn’t find the issues. Please advise. I will send you the link separately as well for privacy reasons.

Hi There,

I went to your page then find this custom CSS:

.mec-wrap, .mec-wrap a {
    background-color: black;
    color: #fff!important;
}

And changed to this:

.mec-wrap a {
    background-color: black;
    color: #fff!important;
}

After that the black background has gone.

It seems this image referenced there has been deleted. Could you please double check?


If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

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

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

Thank you. So, I would like to changed the list view on the home page from modern to standard and am having trouble customizing the css. Please let me know how I can improve my current css to style it better.

I need to make the following changes. Please see the image attached for reference.

1.) Make the text below the header bold, bigger, and white.
2.) Make the Date heading white
3.) Make the button background red
4. ) and The background color of the share icon box to be black.
5.) What is the css selector to change this bar from white?

Hi,

While we are happy to help with the occasional quick tweak here or there, we are well into the custom development realm, which is outside the scope of support we can offer. If you need more in-depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

You guys are getting good at not being helpful. Everything is seem to be outside of your scope. Seriously, why am I paying you guys?

I know that you can help with this is you look at my previous thread from a month ago I had assistance with this exact same problem. https://theme.co/apex/forum/t/modern-events-calendar-customization/33311

I would really appreiciate your assistance with this problem NOW.

Thanks.

Hey @quituck,

With all due respect, you’re requesting custom development from us which is not a part of our support service. Please read our Terms.

To your question:

You’re paying for the theme license along with free theme support within our Terms. Nothing is stated that we provide all the customizations you need or we’ll code what is not offered in the theme and bundled plugin’s options.

I checked the thread you linked to and yes, we provided you assistance to help you get started. We’re not even required to do that because custom coding is not a part of our support service. This is the problem when we do that. Our good intention is almost always taken advantage of or users get confused and think we provide custom code all the time and get frustrated when we can’t.

I’m sorry but you need to consult with a third party developer for continued custom development.

Thank you for understanding.

If you’re not willing to help me identify the css selectors I need to finish my project, I will send my business elsewhere.

It’s sad that you are willing to loose a loyal customer because you are not willing to help with a problem that I know you have the capability to help with. What happened to RAD?

There are lots of themes out there with a great support team. There are also other communities similar to this one with skilled people. As a loyal customer I’ve purchased over a dozen themes, referred clients to you, and have spent thousand with you in the last 3 years. I don’t come to you for assistance often and when I do you are almost always never willing to help.

Which is why I will seek new business with a business that can meet my basic needs such as help identifying css selectors on a plugin that you offered me with your theme.

Hi @quituck,

We do offer a quick help on your other thread and extended it more, we shouldn’t do it actually. If you’ll check that thread and this thread, it’s like we’re doing to customization from scratch. We do can help you, assist and guide you, but we can’t forever give custom codes that finish the whole project from scratch. And they are not just selectors but complete CSS codes. What we gave is just to help you get started given that you’re still familiarizing the HTML and CSS coding from the guides we provided.

And to answer your question to the other thread (javascript for a single event), it should be like this (almost similar to the selector of the CSS that I provided).

jQuery(document).ready(function($) {$('.mec-single-event .mec-btn-wrapper .mec-booking-button').each(function() {$(this).text('Buy Tickets');});});

We can’t provide further customization, if you’re looking for selectors, you can check the guides we provided. You can inspect your site and find your target elements and use their classes as selectors in your CSS. We could check if your CSS is correct or see what’s wrong with it, but we can’t give you the code that makes them all.

Thanks for understanding.

Please remove my website link from this thread. I don’t want that information pubic.

Rad using this css code,

2.) I used the following css to change the date to white and noting happened.
.mec-date-details .mec-event-d {
color: white
}

3.) I attempted to change the background color of the buttons and the button background is still white? I would like it red

.mec-event-list-standard .mec-btn-wrapper .mec-booking-button {
border: 1px solid #cc0000;
color: #ffffff;
background-color: #cc0000;

4.) I tried to make the background of the share icon white using this code and it’s still black
.mec-event-sharing-wrap {
color: white
}

What am I doing wrong. Please advise.

Thanks

Hello @quituck,

Thanks for updating the thread.

You can update the code with following:


.mec-date-details .mec-event-d {
    color: #fff !important;
}

.mec-event-footer .mec-booking-button {
    background-color: #ff0000;
}

a.mec-event-share-icon {
    background-color: #fff;
    color: black !important;
}

To learn about CSS !important property, please take a look at following resource.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
https://medium.com/markuptips/css-is-important-960a9921e454

Thanks.

Thank you very much.
I am trying to change the more info button background color on the homepage slider.

I have tried the following css selectors and no change.

.event-grid-modern-head clearfix .mec-slider-t4-footer .mec-slider-t4-content .mec-event-grid-modern a.mec-booking-button:hover {
background-color: #d71b05;
color: black !important;
}
What am I missing?

Hi @quituck,

Please remove the code that you have added and use this one instead:

.home .owl-item .mec-booking-button {
    background-color: red;
}

.home .owl-item .mec-booking-button:hover {
    color: red !important;
}

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long thread makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

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