|
gmkws
|
June 10, 2019 at 9:57 am
There seems to be a few issues when using mobile , customer see’s images are cut off in the calendar, (home page, and calendar page.) along with not text.
I see the same issue on my mobile device but only sometimes, but never any text.
As well on payment screens pages being cut off with no way to slide left or right to see payment info.
Not 9 doesn’t have the screen cut off, but other versions of IPhone and Samsung were tested with the issue.
Thank you in ,advance,
|
|
Josh
|
June 10, 2019 at 12:52 pm
Hi,
If I understand what you’ve reported here, then the following CSS can be added to your site’s Customize > Additional CSS page to address these:
@media only screen and (max-width: 480px) {
#spco-payment-info-table {
font-size: 14px;
margin-left: -20px;
}
.qtip-content h2 {
font-size: 14px;
}
}
|
|
gmkws
|
June 10, 2019 at 1:12 pm
Thank you for the reply,
That helped with some of the issues, but on the calendar you can see using the link that images on the calendar are being cut off, and the text that is about the event is missing
http://quirktools.com/screenfly/#u=http%3A//corkandboardstudios-dev.com/&w=360&h=640&a=39&s=1
Second link. Some of the images on the main calendar page are cut some are not, and the text is missing
http://quirktools.com/screenfly/#u=http%3A//corkandboardstudios-dev.com/&w=360&h=640&a=39&s=1
to see the desktop version,
http://corkandboardstudios-dev.com/
http://corkandboardstudios-dev.com/calendar/
Gerrit Kelly
|
|
Josh
|
June 10, 2019 at 1:22 pm
Hi,
I cannot see images being cut off, but this will help keep the text inside the small screen view:
@media only screen and (max-width: 480px) {
.qtip-titlebar {
max-width: 100px;
}
}
|
|
gmkws
|
June 10, 2019 at 1:30 pm
Still seeing the problems, links below. Also tested in house on Samsung Note 9
http://quirktools.com/screenfly/#u=http%3A//corkandboardstudios-dev.com/&w=360&h=640&a=39&s=1
http://quirktools.com/screenfly/#u=http%3A//corkandboardstudios-dev.com/&w=360&h=640&a=39&s=1
|
|
Josh
|
June 10, 2019 at 1:42 pm
Can you explain the problems you’re seeing please? I’m not seeing an issue in the screenshots you’ve shared here.
|
|
gmkws
|
June 10, 2019 at 1:49 pm
Link below are screen shots from Note 9, the images are still cut off, and there is no text.
https://drive.google.com/drive/folders/1pFSPoafY0WY8zH3pA_oYP0jXaaoKUsDj?usp=sharing
|
|
gmkws
|
June 10, 2019 at 1:54 pm
to be clear this is not the text that you would see by hovering over, this is the text that is above the image.
|
|
Josh
|
June 10, 2019 at 2:04 pm
I don’t think there’s anything that can be done about those.
|
|
gmkws
|
June 10, 2019 at 2:14 pm
Nothing about the images and the text not showing? how can a customer see times of the class, or any details with out clicking on each image?
I have three other companies that love what they have seen so far and want to change to EE with new site designs with me, but if mobile wont work for the calendar i fear this will be a deal breaker.
Mobile is the most important thing for most customers I hate to see projects leave because of this.
I hope in the near future there can be something done, i am going to have to try and explain to this customer that EE can do nothing about this issue!
Sorry to vent i am just amazed there is nothing.
|
|
Josh
|
June 10, 2019 at 2:28 pm
The image getting cut off at the bottom on some page loads, that’s the issue that isn’t easily resolved. To be honest, the calendar isn’t well suited for mobile experiences so for some time we’ve recommended serving a list of events to mobile devices instead of serving a calendar.
This is quite simple to do:
1) Install this plugin:
https://wordpress.org/plugins/wonderplugin-conditional-display/
2) Do something like this where ever you use a calendar shortcode:
[wonderplugin_cond deviceinclude="iPhone,iPod,Android"]
[ESPRESSO_EVENTS]
[/wonderplugin_cond]
[wonderplugin_cond deviceexclude="iPhone,iPod,Android"]
[ESPRESSO_CALENDAR]
[/wonderplugin_cond]
|
|
gmkws
|
June 10, 2019 at 2:29 pm
I will give this a try and see how it works and show to the customer.
Thank you for another solution.
|
|
Josh
|
June 10, 2019 at 2:32 pm
other shortcodes can be swapped in place of the events list shortcode too, e.g. if you have the table template add-on installed:
[ESPRESSO_EVENTS_TABLE_TEMPLATE template_file=espresso-events-table-template-toggle.template.php]
|
|
gmkws
|
June 11, 2019 at 11:55 am
Using the table plugin will work great, But is there a way to have dates on there so a customer knows when an event is without clicking on each one?
Screen shot link below.
https://drive.google.com/drive/folders/1pFSPoafY0WY8zH3pA_oYP0jXaaoKUsDj?usp=sharing
Thank you,
Gerrit
|
|
Josh
|
June 11, 2019 at 12:01 pm
Yes, you remove the template_file=espresso-events-table-template-toggle.template.php part of the shortcode. That will make it display all the columns without toggling, so you may want to add show_venues=false so the content will fit better on small screens.
|
|
gmkws
|
June 11, 2019 at 12:11 pm
Thank you! how do i get the short calendar to be removed when it is on mobile?
so both do not show?
Much appreciated
|
|
Josh
|
June 11, 2019 at 12:13 pm
1) Install this plugin:
https://wordpress.org/plugins/wonderplugin-conditional-display/
2) Do something like this where ever you use a calendar shortcode:
[wonderplugin_cond deviceinclude="iPhone,iPod,Android"]
[ESPRESSO_EVENTS_TABLE_TEMPLATE show_venues=false]
[/wonderplugin_cond]
[wonderplugin_cond deviceexclude="iPhone,iPod,Android"]
[ESPRESSO_CALENDAR]
[/wonderplugin_cond]
|
|
gmkws
|
June 11, 2019 at 12:19 pm
Thank you again, this made the table get very large? any reason it would change?
|
|
gmkws
|
June 11, 2019 at 12:22 pm
i had extra code in there, it is fixed.
Thank you! very much
|
