How to control look of Single Detailed Event

Hi @skopelosvillas,

Thank you for contacting us,

1. Please follow this link: https://webnus.net/dox/modern-events-calendar/create-events-with-your-page-builder/
   Also you can use this addon: https://webnus.net/modern-events-calendar/addons/elementor-single-builder/

2. Unfortunately not, it’s not possible. maybe you need some customization with code: https://webnus.net/dox/modern-events-calendar/category/developer-document/
3. Unfortunately, your URL is not working.
4. Unfortunately not, it’s not possible on MEC lite, you can use shortcode builder add-on: https://webnus.net/modern-events-calendar/addons/elementor-shortcode-builder/

Best Regards

Hello there and thank you for your reply!!

I will consider the add on’s, but for now, here is that screenshotagain of my single event page and the weird way it displays, ( I hope it works this time as I used a different image hosting service).
If you can give me an idea of why it could possibly display like this, I’d be grateful.

Note: I already disabled all plugins to eliminate any conflict issues, but it still displayed the same.

Hi @skopelosvillas,

It happened because the header template on your website is transparent.
However, please don’t worry you can use the Inspect Element to fix it:
https://webnus.net/dox/modern-events-calendar/inspect-element/

Also, you can use the CSS below, please put the CSS code to MEC Settings > Custom CSS:

.single-mec-events .mec-wrap {
    padding-top: 150px;
}

Best Regards

Hi there,

Thank you for your reply!
The above class did the trick and worked nicely!!!
Although it wasn’t because of the header being transparent. I changed it to non-transparent and issue came back. Anyway, maybe something theme-related.

My final question would be how would I set a class for mobile:
.mec-single-event .mec-events-event-image {

as in screenshot to reduce the margin from header to event’s image? I tried putting a ‘mobile’ element to above class but since I’m doing it wrong, it didn’t work.

Could you please help me with this?

Thank you very much!

You’re welcome,

You can use “media query” for responsive mobile and tablet
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Put your CSS on custom screen size:

@media only screen and (max-width: 480px) {
    .single-mec-events .mec-wrap {
        padding-top: 60px;
    }
}

or use between sizes:

@media (max-width: 960px) and (min-width: 481px){
    .single-mec-events .mec-wrap {
        padding-top: 100px;
    }
}

Resource link: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Best Regards

Cool thank you!

1st media query worked – 2nd not working but never mind – thank you!!

You’re welcome.