{"id":1945151,"date":"2020-01-27T08:23:02","date_gmt":"2020-01-27T13:23:02","guid":{"rendered":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/?post_type=tribe-knowledgebase&#038;p=1945151"},"modified":"2022-04-01T08:26:53","modified_gmt":"2022-04-01T12:26:53","slug":"customizing-mobile-css","status":"publish","type":"post","link":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/customizing-mobile-css\/","title":{"rendered":"Customizing Mobile Styles"},"content":{"rendered":"\n<p class=\"has-background\" style=\"background-color:var(--global-palette8)\">\ud83d\udca1 Be sure you have read our <a href=\"https:\/\/dev.theeventscalendar.com\/knowledgebase\/k\/customizing-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">Customizing CSS documentation page<\/a> before proceeding to this article.<\/p>\n\n\n\n<p>When it comes to customizing mobile styles, there are several key areas to be aware of regarding the responsiveness of the events templates, especially if you plan to customize how this component works. <\/p>\n\n\n\n<p>We\u2019re introducing a new way to handle responsiveness. We\u2019re using container-based queries. This means that the breakpoints react to the size of the containers in which the content is being displayed.<\/p>\n\n\n\n<p>This way we can enable making design changes if a view is being displayed in a widget, in a certain place of a website, where its width is not big enough to display the design correctly.<\/p>\n\n\n\n<p>The way it works is pretty similar to using media queries. The only difference is that we\u2019re using CSS classes to define these. The good news is it\u2019s really simple to add new and customize.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-default-breakpoints\">Default breakpoints<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><code>500<\/code> &#8211; extra small breakpoint<\/li><li><code>768<\/code> &#8211; medium breakpoint<\/li><li><code>960<\/code> &#8211; large breakpoint<\/li><\/ul>\n\n\n\n<p>Meaning that you could do the following if you want to add some special style for a given breakpoint, the medium one in this example:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.tribe-common--breakpoint-medium.tribe-events .myclass {\n    display: none;\n}\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-modifying-breakpoints\">Modifying breakpoints<\/h2>\n\n\n\n<p>If you would like to modify the breakpoints, you can use the below snippet as an example. You don&#8217;t need to include all breakpoints, just the ones you would like to change. Note, this will change the breakpoints on all calendar pages:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; title: ; notranslate\" title=\"\">\nadd_filter( &#039;tribe_events_views_v2_view_breakpoints&#039;, &#039;customize_tribe_events_breakpoints&#039;, 10, 2 );\n\nfunction customize_tribe_events_breakpoints( $breakpoints, $view ) {\n    \/\/ Extra small breakpoint (for mobile)\n    $breakpoints&#x5B;&#039;xsmall&#039;] = 500;\n\n    \/\/ Medium breakpoint (for tablet)\n    $breakpoints&#x5B;&#039;medium&#039;] = 768;\n\n    \/\/ Large breakpoint (for desktop)\n    $breakpoints&#x5B;&#039;full&#039;]   = 960;\n\n    return $breakpoints;\n}\n<\/pre><\/div>\n\n\n<p>When customizing mobile styles, if you would like to change the breakpoints on only a certain calendar view, then you can use the <code>tribe_events_views_v2_view_{$this->slug}_breakpoints<\/code> filter where <code>{$this->slug}<\/code> is the slug of the view. <\/p>\n\n\n\n<p>So, to change the breakpoints only for the List view you would need to modify the first line of the above snippet like this:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; title: ; notranslate\" title=\"\">\nadd_filter( &#039;tribe_events_views_v2_view_list_breakpoints&#039;, &#039;customize_tribe_events_breakpoints&#039;, 10, 2 );\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-adding-new-breakpoints\">Adding new breakpoints<\/h2>\n\n\n\n<p>For example: Let\u2019s say you want to customize the responsive breakpoints to have a new one, extra-large for 1024px. You can use the <code>tribe_events_views_v2_view_breakpoints<\/code> filter like this:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; title: ; notranslate\" title=\"\">\n&lt;?php\nadd_filter( &#039;tribe_events_views_v2_view_breakpoints&#039;, &#039;customize_tribe_events_breakpoints&#039;, 10, 2 );\n\nfunction customize_tribe_events_breakpoints( $breakpoints, $view ) {\n    $breakpoints&#x5B;&#039;extra_large&#039;] = 1024;\n\n    return $breakpoints;\n}\n<\/pre><\/div>\n\n\n<p>And then you can access that like this:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.tribe-common--breakpoint-extra_large.tribe-events .myclass {\n    display: none;\n}\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"<p>\ud83d\udca1 Be sure you have read our Customizing CSS documentation page before proceeding to this article. When it comes to customizing mobile styles, there are several key areas to be aware of regarding the responsiveness of the events templates, especially if you plan to customize how this component works. We\u2019re introducing a new way to&#8230;<\/p>\n","protected":false},"author":3,"featured_media":1955565,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"ep_exclude_from_search":false,"footnotes":""},"categories":[116],"tags":[23,25,58],"stellar-product-taxonomy":[161],"class_list":["post-1945151","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-styling","tag-css","tag-customizations","tag-php","stellar-product-taxonomy-the-events-calendar"],"acf":[],"taxonomy_info":{"category":[{"value":116,"label":"CSS &amp; Styling"}],"post_tag":[{"value":23,"label":"CSS"},{"value":25,"label":"Customizations"},{"value":58,"label":"PHP"}],"stellar-product-taxonomy":[{"value":161,"label":"The Events Calendar"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"Jaime Marchwinski","author_link":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/author\/jaimetri-be\/"},"comment_info":0,"category_info":[{"term_id":116,"name":"CSS &amp; Styling","slug":"css-styling","term_group":0,"term_taxonomy_id":116,"taxonomy":"category","description":"","parent":24,"count":33,"filter":"raw","term_order":"0","cat_ID":116,"category_count":33,"category_description":"","cat_name":"CSS &amp; Styling","category_nicename":"css-styling","category_parent":24}],"tag_info":[{"term_id":23,"name":"CSS","slug":"css","term_group":0,"term_taxonomy_id":23,"taxonomy":"post_tag","description":"","parent":20,"count":48,"filter":"raw","term_order":"0"},{"term_id":25,"name":"Customizations","slug":"customizations","term_group":0,"term_taxonomy_id":25,"taxonomy":"post_tag","description":"","parent":0,"count":177,"filter":"raw","term_order":"0"},{"term_id":58,"name":"PHP","slug":"php","term_group":0,"term_taxonomy_id":58,"taxonomy":"post_tag","description":"","parent":20,"count":128,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945151","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1945151"}],"version-history":[{"count":1,"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945151\/revisions"}],"predecessor-version":[{"id":1956059,"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945151\/revisions\/1956059"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1945151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1945151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1945151"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1945151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}