|
racestart
|
June 2, 2016 at 9:30 am
Hey guys, any thoughts on how I can get the event times to display on mobile?
http://racestarttraining.com/schedule/
Thanks,
JS
|
|
Josh
|
June 3, 2016 at 10:49 am
Hi JS,
You can add the following CSS to your custom stylesheet:
#espresso_calendar .time-display-block {
visibility: visible !important;
}
If you don’t already have a custom stylesheet, you can add a Custom CSS editor to your WordPress site by installing the Reaktiv CSS Builder plugin.
|
|
racestart
|
June 3, 2016 at 11:34 am
Hmmm no luck! I have been using CSS in my child theme.
|
|
Josh
|
June 3, 2016 at 11:42 am
Did you remove the style after you added it? The reason I ask is because I don’t see it in this file:
http://racestarttraining.com/wp-content/themes/enfold-child/style.css?ver=2
|
|
racestart
|
June 3, 2016 at 12:01 pm
Jut re-added it …thanks!
|
|
Josh
|
June 3, 2016 at 12:37 pm
Okay so that’s working for displays down to 480px wide. For displays that are less than 480px in width, you can add the following (and tweak the em sizes to your liking) :
#espresso_calendar .fc-event-title,
#espresso_calendar .time-display-block {
display: inherit;
font-size: 0.5em;
}
#espresso_calendar .fc-event {
max-height: 20em;
}
|
|
racestart
|
June 3, 2016 at 12:45 pm
OK I see. I commented out the CSS for now. I didn’t communicate this clearly, sorry. The time needs to display on the tooltip. Right now, if you hover over an item, and tooltip pops up….you see the event and ‘call to action’ to VIEW DETAILS. Along with the event name, I a looking to just have the times listed as well. Does that make sense? Sorry for the miscommunication
|
|
Josh
|
June 3, 2016 at 12:51 pm
No worries. This is what you’re looking for:
.ui-tooltip-content p {
display: inherit;
}
|
|
racestart
|
June 3, 2016 at 1:05 pm
CLOSE! Minus the description.
|
|
Josh
|
June 3, 2016 at 1:29 pm
I’m not sure what you mean.
|
|
racestart
|
June 3, 2016 at 1:36 pm
hmm LMK if this helps: http://js-interactive.com/eetool.jpg
|
|
Josh
|
June 3, 2016 at 2:23 pm
In addition to what you added already:
.ui-tooltip-content p {
display: inherit;
}
You add the following:
@media only screen and (max-width: 480px) {
.ui-tooltip-content .event-description {
display: none;
}
}
|
|
racestart
|
June 3, 2016 at 2:46 pm
AH yes! Thank you sir!
|
