Mobile View of Grid Problem

[Cassandra Rogers]

Hi, On our main calendar (which is the grid view), when you view on a mobile device the calendar get all scrunched and really off looking.

Can you help us fix this please?

https://www.eagleridgeacademy.org/school-calendar/

Thanks,
Jen

[Mathew]

Cassandra,

The issue may be a result of your minification/caching plugin. You may want to temporarily disable it to see if the issue resolves itself.

The Events Calendar does not recommend minifying or compressing any of it’s components. Here’s an article on the subject.

If the problem does go away after disabling the minification plugin, then you may want to re-enable it and review its settings to see if you can exclude certain things, most importantly anything related to The Events Calendar plugins.

If that does not resolve the issue, then more in-depth plugin conflict troubleshooting will need to be done.

Hope this helps.

[Cassandra Rogers]

Hi,

I disabled the entire caching plugin and it is still not working correctly. I have included a screen shot so you can see what is going on.

Thanks,
Jen

[Cassandra Rogers]

Hi Again,

I just went in and deactivated all of the plugins we have and it is still showing wonky.

Thank you for you help in trying to figure this out.

Jen

[Jaime Marchwinski]

Hi Jen,

Thanks for reaching out!

I’m sorry to hear that you are having an issue with the mobile version of your site.   As a first troubleshooting step, could you please provide us with your complete system information in a private reply using the instructions found in the following link?
https://theeventscalendar.com/knowledgebase/sharing-sys-info/

Also, I am seeing some errors related the the Quform CSS file.  You may want to look there, especially if you have edited something, as it seems to be interfering with the way that the calendar is displaying.

Let me know how it goes and if you have any other questions related to this issue along the way!

 

Thanks,

Jaime

[Cassandra Rogers]

Hi Jamie,

I have fully disabled QuForm and it did not fix the problem. I will leave it disabled so you can view it.

D
Home URL
https://www.eagleridgeacademy.org
Site URL
https://www.eagleridgeacademy.org/site
Site Language
English
Character Set
UTF-8
Name
administrator
Email
[email protected]
Install keys

events-calendar-pro = fd37################################5472

WordPress version
4.8.1
PHP version
7.0.23
PHP

max_execution_time = 180
memory_limit = 256M
upload_max_filesize = 4M
post_max_size = 8M
display_errors =
log_errors = 1

Server
Apache
SAPI
fpm-fcgi
Plugins

Widgets On Pages version 1.3.0 by Todd Halfpenny(http://toddhalfpenny.com/)
Adminimize version 1.11.2 by Frank Bültge(http://bueltge.de/)
Change Password Protected Message version 1.0 by pipdig(https://www.pipdig.co/)
The Events Calendar PRO version 4.4.17 by Modern Tribe, Inc.(http://m.tri.be/20)
Fusion Builder version 1.2.2 by ThemeFusion(http://www.theme-fusion.com)
Fusion Core version 3.2.2 by ThemeFusion(http://theme-fusion.com)
Google Language Translator version 5.0.31 by Rob Myrick(http://www.wp-studio.net/)
Post Duplicator version 2.20 by Metaphor Creations(http://www.metaphorcreations.com)
Slider Revolution version 5.4.5.1 by ThemePunch(http://themepunch.com)
Simple History version 2.18 by Pär Thernström(http://simple-history.com/)
Simple Post Expiration version 1.0.1 by Pippin Williamson(http://pippinsplugins.com)
NextScripts: Social Networks Auto-Poster version 3.8.7 by NextScripts(http://www.nextscripts.com)
The Events Calendar version 4.5.12.2 by Modern Tribe, Inc.(http://m.tri.be/1x)
User Role Editor version 4.35.3 by Vladimir Garagulya(https://www.role-editor.com)
Wordfence Security version 6.3.18 by Wordfence(http://www.wordfence.com/)
WP Rollback version 1.5 by WordImpress(https://wordimpress.com/)

Network Plugins
–
MU Plugins
–
Theme
Avada
Multisite
–
Settings

schema-version = 4.5.12.2
recurring_events_are_hidden = exposed
previous_ecp_versions =

Array
(
[0] => 0
[1] => 4.5.1
[2] => 4.5.2
[3] => 4.5.6
[4] => 4.5.7
[5] => 4.5.8
[6] => 4.5.8.1
[7] => 4.5.9
[8] => 4.5.10
[9] => 4.5.10.1
[10] => 4.5.11
)

latest_ecp_version = 4.5.12.2
last-update-message-the-events-calendar = 4.5.12.2
tribeEnableViews =

Array
(
[0] => month
)

stylesheetOption = tribe
tribeEventsTemplate =
viewOption = month
tribeDisableTribeBar =
monthEventAmount = 5
enable_month_view_cache = 1
dateWithYearFormat = F j, Y
dateWithoutYearFormat = F j
monthAndYearFormat = F Y
dateTimeSeparator = @
timeRangeSeparator = –
datepickerFormat = 2
tribeEventsBeforeHTML =
tribeEventsAfterHTML = <div align=\”right\”>[fusion_separator style_type=\”none\” hide_on_mobile=\”small-visibility,medium-visibility,large-visibility\” class=\”\” id=\”\” sep_color=\”\” top_margin=\”20\” bottom_margin=\”20\” border_size=\”\” icon=\”\” icon_circle=\”\” icon_circle_color=\”\” width=\”\” alignment=\”center\”][/fusion_separator][fusion_button link=\”https://www.eagleridgeacademy.org/school-calendar/feed/\” title=\”\” target=\”_blank\” link_attributes=\”\” alignment=\”\” modal=\”\” hide_on_mobile=\”small-visibility,medium-visibility,large-visibility\” class=\”sub-cal2\” id=\”\” color=\”default\” button_gradient_top_color=\”\” button_gradient_bottom_color=\”\” button_gradient_top_color_hover=\”\” button_gradient_bottom_color_hover=\”\” accent_color=\”\” accent_hover_color=\”\” type=\”\” bevel_color=\”\” border_width=\”\” size=\”\” stretch=\”default\” shape=\”\” icon=\”\” icon_position=\”left\” icon_divider=\”no\” animation_type=\”\” animation_direction=\”left\” animation_speed=\”0.3\” animation_offset=\”\”]SUBSCRIBE TO THE ERA RSS CALENDAR[/fusion_button][fusion_separator style_type=\”none\” hide_on_mobile=\”small-visibility,medium-visibility,large-visibility\” class=\”\” id=\”\” sep_color=\”\” top_margin=\”20\” bottom_margin=\”20\” border_size=\”\” icon=\”\” icon_circle=\”\” icon_circle_color=\”\” width=\”\” alignment=\”center\”][/fusion_separator]</div>
earliest_date = 2017-06-26 18:00:00
earliest_date_markers =

Array
(
[0] => 2276
)

latest_date = 2018-07-24 21:00:00
latest_date_markers =

Array
(
[0] => 3055
)

google_maps_js_api_key = AIzaSyAzcgn-XSzh1f8jt11dAPIID7UW8CDgEr8
donate-link =
postsPerPage = 2
liveFiltersUpdate = 1
showComments =
showEventsInMainLoop =
eventsSlug = school-calendar
singleEventSlug = event
multiDayCutoff = 00:00
defaultCurrencySymbol = $
reverseCurrencyPosition =
embedGoogleMaps = 1
embedGoogleMapsZoom = 10
debugEvents =
tribe_events_timezone_mode = event
tribe_events_timezones_show_zone =
front_page_event_archive =
disable_metabox_custom_fields = show
pro-schema-version = 4.4.17
mobile_default_view = list
hideLocationSearch =
hideRelatedEvents = 1
week_view_hide_weekends =
weekDayFormat = D jS
hideSubsequentRecurrencesDefault =
userToggleSubsequentRecurrences =
recurrenceMaxMonthsBefore = 24
recurrenceMaxMonthsAfter = 24
geoloc_default_geofence = 25
geoloc_default_unit = miles

WP Timezone
Unknown or not set
WP GMT Offset
-5
Server Timezone
UTC
WP Date Format
F j, Y
WP Time Format
g:i a
Week Starts On
–
Common Library Dir
/home/eagleridgeacadem/public_html/site/wp-content/plugins/the-events-calendar/common/src/Tribe
Common Library Version
4.5.12

[Jaime Marchwinski]

Hi Jen,

Thank you for providing us with that information!

Matthew was definitely pointing us in the right direction, as I believe that this is a result of minification.  The issue is in this file: http://eagleridgeacademy.org/site/wp-content/cache/minify/eecc1.css

The calendar width is displayed at 14.28%, which is causing it to look the way it does, which you can see here:

You may be able to resolve this issue with CSS and changing the width to 100% either in your child theme’s CSS or in the WordPress Customizer.

You can read about problems with minification here: https://theeventscalendar.com/knowledgebase/problems-with-minification/

And you may find this blog post helpful in resolving the issue: https://tangerinemoons.com/using-wordpress-w3-total-cache-modern-tribes-event-calendar/

Let me know how it goes!

 

Thanks,

Jaime

[Cassandra Rogers]

Hi,

I actually cannot find that file anymore. We completely deleted the cache plugin and this is still happening. We noticed this after we did the most recent update.

Any ideas?

Jen 🙂

[Jaime Marchwinski]

Hi Jen,

I’m sorry that you are still experiencing your issue, I can understand your frustration.

Although you disabled the plugin, that file is still there at the location I mentioned, as I am able to still see it showing up on your site.  What cache plugin was it?  You may want to contact them directly if you cannot resolve the issue.

Alternatively, you can try to alter the CSS that I mentioned above, so that the width is 100%.  It would look something like this:

#tribe-events-content .tribe-events-calendar td {

width: 100%;

}

Additionally, if you still have the options available on your site, you may want to try to adjust your minification settings.  Perhaps re-activating the cache plugin and changing the settings will help.

Let me know how it all goes!

 

Thanks,

Jaime

[Mathew]

Jen,

Avada now has its own minfication that is on by default. It will compress CSS and JS within the Avada product. There’s a button in Avada to disable the feature and to clear its cache. For testing purposes, I would do both. Set “CSS Compiling method” to Disabled. Set “Enable JS Compiler” to OFF. Reset Fusion Caches.

It’s located under Avada > Theme Options > Advanced > Dynamic CSS & JS.

[Jaime Marchwinski]

Hi Jen,

Matthew has a great point!  Give what he said a try and let us know how it goes!

 

Thanks,

Jaime

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts