{"id":1048298,"date":"2015-12-30T18:02:56","date_gmt":"2015-12-31T02:02:56","guid":{"rendered":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/filter-bar-responsive-breakpoint\/"},"modified":"2016-02-19T08:35:05","modified_gmt":"2016-02-19T16:35:05","slug":"filter-bar-responsive-breakpoint","status":"closed","type":"topic","link":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/filter-bar-responsive-breakpoint\/","title":{"rendered":"Filter Bar Responsive Breakpoint"},"content":{"rendered":"

Hi,<\/p>\n

The Events Calendar’s responsive breakpoint kicks in “not just if the screen is less than 768 pixels, but the container holding the calendar as well. If the calendar is sitting in a container that is less than 768 pixels, then it will respond to that breakpoint.”<\/p>\n

However, the Filter Bar’s responsive breakpoint (also 768 pixels), only kicks in based on the screen size. This can cause the calendar to appear too small on sites that have a sidebar, where the container of the calendar is much narrower due to the Filter Bar continuing to display its large layout even though its container is now under 768 pixels.<\/p>\n

How can we set the Filter Bar’s responsive breakpoint to kick in not only when the screen size reaches the calendar’s breakpoint, but also when the size of the container holding the calendar reaches that breakpoint?<\/p>\n

Thanks and Happy New Year!<\/p>\n","protected":false},"template":"","class_list":["post-1048298","topic","type-topic","status-closed","hentry"],"yoast_head":"\nFilter Bar Responsive Breakpoint -<\/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\/filter-bar-responsive-breakpoint\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Filter Bar Responsive Breakpoint -\" \/>\n<meta property=\"og:description\" content=\"Hi, The Events Calendar’s responsive breakpoint kicks in “not just if the screen is less than 768 pixels, but the container holding the calendar as well. If the calendar is sitting in a container that is less than 768 pixels, then it will respond to that breakpoint.” However, the Filter Bar’s responsive breakpoint (also 768 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/filter-bar-responsive-breakpoint\/\" \/>\n<meta property=\"article:modified_time\" content=\"2016-02-19T16:35:05+00:00\" \/>\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=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/filter-bar-responsive-breakpoint\/\",\"url\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/filter-bar-responsive-breakpoint\/\",\"name\":\"Filter Bar Responsive Breakpoint -\",\"isPartOf\":{\"@id\":\"https:\/\/theeventscalendar.com\/support\/#website\"},\"datePublished\":\"2015-12-31T02:02:56+00:00\",\"dateModified\":\"2016-02-19T16:35:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/filter-bar-responsive-breakpoint\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/filter-bar-responsive-breakpoint\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/filter-bar-responsive-breakpoint\/#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\":\"Calendar Products\",\"item\":\"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Filter Bar\",\"item\":\"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/filter-bar\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Filter Bar Responsive Breakpoint\"}]},{\"@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":"Filter Bar Responsive Breakpoint -","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\/filter-bar-responsive-breakpoint\/","og_locale":"en_US","og_type":"article","og_title":"Filter Bar Responsive Breakpoint -","og_description":"Hi, The Events Calendar’s responsive breakpoint kicks in “not just if the screen is less than 768 pixels, but the container holding the calendar as well. If the calendar is sitting in a container that is less than 768 pixels, then it will respond to that breakpoint.” However, the Filter Bar’s responsive breakpoint (also 768 […]","og_url":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/filter-bar-responsive-breakpoint\/","article_modified_time":"2016-02-19T16:35:05+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/filter-bar-responsive-breakpoint\/","url":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/filter-bar-responsive-breakpoint\/","name":"Filter Bar Responsive Breakpoint -","isPartOf":{"@id":"https:\/\/theeventscalendar.com\/support\/#website"},"datePublished":"2015-12-31T02:02:56+00:00","dateModified":"2016-02-19T16:35:05+00:00","breadcrumb":{"@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/filter-bar-responsive-breakpoint\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/theeventscalendar.com\/support\/forums\/topic\/filter-bar-responsive-breakpoint\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/filter-bar-responsive-breakpoint\/#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":"Calendar Products","item":"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/"},{"@type":"ListItem","position":4,"name":"Filter Bar","item":"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/filter-bar\/"},{"@type":"ListItem","position":5,"name":"Filter Bar Responsive Breakpoint"}]},{"@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\/1048298","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":1,"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic\/1048298\/revisions"}],"predecessor-version":[{"id":1050171,"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic\/1048298\/revisions\/1050171"}],"wp:attachment":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/media?parent=1048298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}