I see from past change logs that you have addressed one compatibility issue with the Events Calendar Pro plugin. We are having a different issue where the individual events pages are not fully responsive on mobile devices. The list display works fine; it's just the individual event page where headings, photos, and text are cut off. The plugin support tells me it is a theme compatibility issue. I have the most recent versions of Salient and Events Calendar Pro installed. Can you provide any suggestions? Thank you.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 690px) {
.single-tribe_events .tribe-events-pg-template {
max-width:320px !important;
}
}
@media only screen and (min-width: 690px) and (max-width: 999px) {
.single-tribe_events .tribe-events-pg-template {
max-width: 600px !important;
}
}
@media only screen and (min-width: 1000px) {
.single-tribe_events .tribe-events-pg-template {
max-width: 1800px !important;
}
}
I see from past change logs that you have addressed one compatibility issue with the Events Calendar Pro plugin. We are having a different issue where the individual events pages are not fully responsive on mobile devices. The list display works fine; it's just the individual event page where headings, photos, and text are cut off. The plugin support tells me it is a theme compatibility issue. I have the most recent versions of Salient and Events Calendar Pro installed. Can you provide any suggestions? Thank you.
Hi There,
Please share screenshots with the areas with responsive issues so that we may locate them out easily.
Thanks.
Please see attached views with comments.
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 690px) { .single-tribe_events .tribe-events-pg-template { max-width:320px !important; } } @media only screen and (min-width: 690px) and (max-width: 999px) { .single-tribe_events .tribe-events-pg-template { max-width: 600px !important; } } @media only screen and (min-width: 1000px) { .single-tribe_events .tribe-events-pg-template { max-width: 1800px !important; } }Thanks
ThemeNectar Support Team
Thank you, this worked perfectly. I appreciate your help.