{"id":1545876,"date":"2018-06-04T14:02:39","date_gmt":"2018-06-04T21:02:39","guid":{"rendered":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/month-view-responsive-issue\/"},"modified":"2018-06-04T14:02:39","modified_gmt":"2018-06-04T21:02:39","slug":"month-view-responsive-issue","status":"closed","type":"topic","link":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/month-view-responsive-issue\/","title":{"rendered":"Month View Responsive Issue"},"content":{"rendered":"

Hello!<\/p>\n

I’ve installed the free version for testing before purchasing the Pro version. While in testing, I noticed that the calendar was not properly resizing for mobile. Rather than changing to the mini calendar at smaller window sizes, it loads a really skinny left-side column with the date numbers and the actual list of events way down on the screen. See this screenshot<\/a>, taken in Google Chrome on a desktop with the browser window somewhere around 680px. I’ve tested it in multiple browsers on desktop as well as on phones, and I get the same result in all.<\/p>\n

I’ve done more extensive testing on our staging site. If I revert to the Twenty Sixteen theme (or even our parent Divi theme), the calendar resizes correctly at all widths. It’s only in our child theme that I see the conflict, so that’s step one of the troubleshoot. I did re-activate the child theme for the troubleshooting I describe below. (Both the live and staging sites mentioned below are using the child theme.)<\/p>\n

Additionally, I found this post in the Knowledgebase<\/a> about mobile breakpoints and have placed the recommended code from there in the functions.php while playing with different breakpoints (all on the staging site). Our child theme has the mobile breakpoint at 767. I tested things by setting the Tribe events breakpoint at 800, and you do see the correct mini-calendar view appear for a little while as you resize the browser window–but as soon as you get too small, it malfunctions to the view from the screenshot above. <\/p>\n

On our live site (http:\/\/ritchiecenter.du.edu\/events\/<\/a>), all of the original code is there, and you can see that at exactly 767 pixels, the mini-calendar appears. Anything wider and you see the full month view. Anything narrower (even by one pixel) and you get the malfunction.<\/p>\n

On the staging site (http:\/\/ritchiecenter2.staging.wpengine.com\/events\/<\/a>), I currently have the custom Tribe code for mobile breakpoints mentioned above, and it is set for the calendar’s breakpoint at 800. If you resize the window slowly, you see the correct mini-calendar for a little bit before it goes to the malfunctioning view.<\/p>\n

So as far as I can tell, it will change to the mini-calendar but not lower than the exact breakpoint laid out in the child theme.<\/p>\n

Throughout all of this (on both the live and staging sites), I’ve cleared the cache several times, which hasn’t helped.<\/p>\n

We’re running the latest version of The Events Calendar (4.6.18), which was just released today, so maybe this is a bug from the new version? (Not likely based on what I read in the changelog, but who knows.)<\/p>\n

I know that this may only be a theme-related malfunction and not something directly related to Modern Tribe or the plugin, but I thought I’d reach out here to see if 1) you’ve ever seen anything like this happen before and 2) if we can find a solution. (I’ve had very poor luck getting support from the Divi theme team and would love to avoid working with them if at all possible.)<\/p>\n

There are still a few other things we’re looking to test before purchasing Pro but if we can’t even get the mobile side of things working, we’ll uninstall The Events Calendar (free version) and continue looking for a different plugin. But if we can troubleshoot the mobile responsive issues, we’re optimistic and anticipate we’ll purchase Pro within the week.<\/p>\n","protected":false},"template":"","class_list":["post-1545876","topic","type-topic","status-closed","hentry"],"yoast_head":"\nMonth View Responsive Issue -<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/month-view-responsive-issue\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Month View Responsive Issue -\" \/>\n<meta property=\"og:description\" content=\"Hello! I’ve installed the free version for testing before purchasing the Pro version. While in testing, I noticed that the calendar was not properly resizing for mobile. Rather than changing to the mini calendar at smaller window sizes, it loads a really skinny left-side column with the date numbers and the actual list of events […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/month-view-responsive-issue\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/month-view-responsive-issue\/\",\"url\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/month-view-responsive-issue\/\",\"name\":\"Month View Responsive Issue -\",\"isPartOf\":{\"@id\":\"https:\/\/theeventscalendar.com\/support\/#website\"},\"datePublished\":\"2018-06-04T21:02:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/month-view-responsive-issue\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/month-view-responsive-issue\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/month-view-responsive-issue\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/theeventscalendar.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Topics\",\"item\":\"https:\/\/theeventscalendar.com\/support\/topics\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Welcome!\",\"item\":\"https:\/\/theeventscalendar.com\/support\/forums\/forum\/_welcome\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Pre-Sales Questions\",\"item\":\"https:\/\/theeventscalendar.com\/support\/forums\/forum\/_welcome\/pre-sales-questions\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Month View Responsive Issue\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/#website\",\"url\":\"https:\/\/theeventscalendar.com\/support\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/theeventscalendar.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Month View Responsive Issue -","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/month-view-responsive-issue\/","og_locale":"en_US","og_type":"article","og_title":"Month View Responsive Issue -","og_description":"Hello! I’ve installed the free version for testing before purchasing the Pro version. While in testing, I noticed that the calendar was not properly resizing for mobile. Rather than changing to the mini calendar at smaller window sizes, it loads a really skinny left-side column with the date numbers and the actual list of events […]","og_url":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/month-view-responsive-issue\/","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/month-view-responsive-issue\/","url":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/month-view-responsive-issue\/","name":"Month View Responsive Issue -","isPartOf":{"@id":"https:\/\/theeventscalendar.com\/support\/#website"},"datePublished":"2018-06-04T21:02:39+00:00","breadcrumb":{"@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/month-view-responsive-issue\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/theeventscalendar.com\/support\/forums\/topic\/month-view-responsive-issue\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/month-view-responsive-issue\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/theeventscalendar.com\/support\/"},{"@type":"ListItem","position":2,"name":"Topics","item":"https:\/\/theeventscalendar.com\/support\/topics\/"},{"@type":"ListItem","position":3,"name":"Welcome!","item":"https:\/\/theeventscalendar.com\/support\/forums\/forum\/_welcome\/"},{"@type":"ListItem","position":4,"name":"Pre-Sales Questions","item":"https:\/\/theeventscalendar.com\/support\/forums\/forum\/_welcome\/pre-sales-questions\/"},{"@type":"ListItem","position":5,"name":"Month View Responsive Issue"}]},{"@type":"WebSite","@id":"https:\/\/theeventscalendar.com\/support\/#website","url":"https:\/\/theeventscalendar.com\/support\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/theeventscalendar.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic\/1545876","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic\/1545876\/revisions"}],"wp:attachment":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/media?parent=1545876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}