{"id":171,"date":"2020-02-16T10:40:56","date_gmt":"2020-02-16T10:40:56","guid":{"rendered":"https:\/\/webnus.net\/kata\/documentation\/?p=171"},"modified":"2021-03-03T10:06:49","modified_gmt":"2021-03-03T10:06:49","slug":"responsive-design-with-the-styler-tool","status":"publish","type":"post","link":"https:\/\/webnus.net\/kata\/documentation\/responsive-design-with-the-styler-tool\/","title":{"rendered":"Responsive Design With The Styler Tool"},"content":{"rendered":"\r\n<p>Kata adds 3 viewports to Elementor, and as a result, you\u2019ll gain access to a total of 6 sizes for different styles. Your website will also support more device outputs and will function differently on various screen sizes. These sizes are:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Desktop (1920px)<\/li>\r\n<li>Laptop (1366px)<\/li>\r\n<li>Tablet Landscape (1024px)<\/li>\r\n<li>Tablet (768px)<\/li>\r\n<li>Mobile (480px)<\/li>\r\n<li>Small Mobile (320px)<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>In order to start using the Responsive design, you\u2019ll first need to set the website\u2019s container size from\u00a0<strong>Theme Option\u00a0(<\/strong>Link to<strong>\u00a0Customize<\/strong>\u00a0&gt;<strong>\u00a0Container<\/strong>)<\/p>\r\n\r\n\r\n\r\n<p>In the\u00a0<strong>Devices<\/strong>\u00a0menu, there are different styler sizes for all kinds of devices with responsive design. You can exclusively style each device by choosing them from the menu since the Styler implements changes on the Desktop version by default. So make sure to choose your other devices as well.<\/p>\r\n\r\n\r\n\r\n<p><a href=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-responsive-Design-With-The-Styler-Tool-01.jpg\" rel=\"attachment wp-att-2394\"><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter wp-image-2394 size-full\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-responsive-Design-With-The-Styler-Tool-01.jpg\" alt=\"\" width=\"1024\" height=\"561\" srcset=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-responsive-Design-With-The-Styler-Tool-01.jpg 1024w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-responsive-Design-With-The-Styler-Tool-01-300x164.jpg 300w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-responsive-Design-With-The-Styler-Tool-01-768x421.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\r\n\r\n\r\n\r\n<p>Let\u2019s assume I\u2019m in the Elementor editing environment, and I am to change the font size of a title in different devices. I\u2019ve set it as 42px on desktop but want it to be much smaller on tablets. I choose Tablet from the Devices menu.<\/p>\r\n<p><a href=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-responsive-Design-With-The-Styler-Tool-02.jpg\" rel=\"attachment wp-att-2395\"><img decoding=\"async\" class=\"aligncenter wp-image-2395 size-full\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-responsive-Design-With-The-Styler-Tool-02.jpg\" alt=\"\" width=\"1024\" height=\"560\" srcset=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-responsive-Design-With-The-Styler-Tool-02.jpg 1024w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-responsive-Design-With-The-Styler-Tool-02-300x164.jpg 300w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-responsive-Design-With-The-Styler-Tool-02-768x420.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\r\n\r\n\r\n\r\n\r\n\r\n<p>I set the font to 28px for tablet, and as you can see in the image below, the size of the title has decreased but only in Tablet view.<\/p>\r\n<p><a href=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-responsive-Design-With-The-Styler-Tool-03.jpg\" rel=\"attachment wp-att-2396\"><img decoding=\"async\" class=\"aligncenter wp-image-2396 size-full\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-responsive-Design-With-The-Styler-Tool-03.jpg\" alt=\"\" width=\"1024\" height=\"559\" srcset=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-responsive-Design-With-The-Styler-Tool-03.jpg 1024w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-responsive-Design-With-The-Styler-Tool-03-300x164.jpg 300w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-responsive-Design-With-The-Styler-Tool-03-768x419.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\r\n\r\n\r\n\r\n<p>&nbsp;<\/p>\r\n<p><iframe src=\"https:\/\/www.youtube.com\/embed\/RWcOn8_mhyI?list=UU3WeWC87RzF3bYyJqQDOx3A\" width=\"1280\" height=\"400\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>","protected":false},"excerpt":{"rendered":"<p>Kata adds 3 viewports to Elementor, and as a result, you\u2019ll gain access to a total of 6 sizes for different styles. Your website will also support more device outputs and will function differently on various screen sizes. These sizes are: Desktop (1920px) Laptop (1366px) Tablet Landscape (1024px) Tablet (768px) Mobile (480px) Small Mobile (320px) [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":934,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[],"class_list":["post-171","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-responsive-design"],"_links":{"self":[{"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/posts\/171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/comments?post=171"}],"version-history":[{"count":0,"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/posts\/171\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/media\/934"}],"wp:attachment":[{"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/media?parent=171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/categories?post=171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/tags?post=171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}