The events calendar breaks design

Hi Asterios,

I added following code to bottom of Quick CSS field

.datepicker.dropdown-menu { z-index: 999 !important; }
#tribe-bar-form .tribe-bar-filters {
    padding: 0 20px;
}

First line is to fix z-index issue and second one is to add padding to both sides.

We are sorry about that. Unfortunately, our response times have increased a bit lately. I will discuss how we can improve it with the team and will forward it to Kriesi.

Please review your website

Best regards,
Yigit

• This reply was modified 3 years, 8 months ago by Yigit.

Hi,
Sorry for the very late reply and thanks for the login, I believe I found the correct page, but it looks like you are testing the Modern Events Calendar Lite plugin instead of the Events Calendar plugin, has this helped your situation?

Best regards,
Mike

Hi,
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

.mec-events-template-default dt,.mec-events-template-default dd {
    float: unset !important;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for the feedback, for your breadcrumbs on mobile I found these two css rules which I believe is added to your custom css:

@media only screen and (max-width: 767px){
.responsive #top #main {
    padding-top: 0!important;
    margin: 0;
}
}

and

@media only screen and (max-width: 989px) and (min-width: 768px){
.responsive.html_mobile_menu_tablet.html_header_top #top #main {
    padding-top: 0!important;
    margin: 0;
}
}

If you can find these and remove them it would correct your issue, but if you can’t find them you can use this css to override them, I recommend adding this css to the WordPress > Customize > Additional CSS field, as it has the highest priority.

@media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive.html_mobile_menu_tablet.html_header_top #top #wrap_all #main {
    padding-top: 88px !important;
}
}

@media only screen and (max-width: 767px){
.responsive #top #wrap_all #main {
    padding-top: 88px !important;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad we were able to help and sorry again for the very late reply, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike