{"id":148,"date":"2019-01-22T18:37:19","date_gmt":"2019-01-22T18:37:19","guid":{"rendered":"https:\/\/exponentwptheme.com\/documentation\/?page_id=148"},"modified":"2019-01-25T05:41:01","modified_gmt":"2019-01-25T05:41:01","slug":"responsive-controls","status":"publish","type":"page","link":"https:\/\/exponentwptheme.com\/documentation\/responsive-controls\/","title":{"rendered":"Responsive Controls"},"content":{"rendered":"<div  class=\"tatsu-fzh2nfa4kv755cjg tatsu-section    tatsu-clearfix\" data-title=\"\"  data-headerscheme=\"background--dark\"><div class='tatsu-section-pad clearfix' data-padding='{\"d\":\"90px 0px 90px 0px\"}' data-padding-top='90px'><div class=\"tatsu-row-wrap  tatsu-wrap tatsu-row-has-two-cols tatsu-medium-gutter tatsu-reg-cols  tatsu-clearfix tatsu-fzh2nfa4nres1hnk\" ><div  class=\"tatsu-row \" ><div  class=\"tatsu-column  tatsu-column-no-bg tatsu-one-fourth tatsu-column-image-none tatsu-column-effect-none  tatsu-fzh2nfa4rccx4ri5\" data-animation=\"fadeIn\"   data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner  tatsu-column-sticky\" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div  class=\"tatsu-module tatsu-sidebar tatsu-fzh2nfa4sp51kttb   \" data-animation=\"fadeIn\"   ><div class=\"widget_nav_menu widget\"><h6>Related Articles<\/h6><div class=\"menu-tatsu-container\"><ul id=\"menu-tatsu\" class=\"menu\"><li id=\"menu-item-266\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-266\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/tatsu-overview\/\" title=\"Tatsu Overview\">Tatsu Overview<\/a><\/li>\n<li id=\"menu-item-267\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-267\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/tatsu-components\/\" title=\"Tatsu Components\">Tatsu Components<\/a><\/li>\n<li id=\"menu-item-268\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-268\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/build-a-page-with-tatsu\/\" title=\"Build a page with Tatsu\">Build a page with Tatsu<\/a>\n<ul class=\"sub-menu\">\n\t<li id=\"menu-item-231\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-231\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/build-a-page-with-tatsu\/#section-operations\" title=\"Sections\">Sections<\/a><\/li>\n\t<li id=\"menu-item-232\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-232\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/build-a-page-with-tatsu\/#row-operations\" title=\"Row\">Row<\/a><\/li>\n\t<li id=\"menu-item-233\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-233\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/build-a-page-with-tatsu\/#column-operations\" title=\"Column\">Column<\/a><\/li>\n\t<li id=\"menu-item-234\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-234\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/build-a-page-with-tatsu\/#module-operations\" title=\"Modules\">Modules<\/a><\/li>\n<\/ul>\n<\/li>\n<li id=\"menu-item-269\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-269\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/context-menu\/\" title=\"Context Menu and Observer\">Context Menu and Observer<\/a><\/li>\n<li id=\"menu-item-270\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-270\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/responsive-controls\/\" title=\"Responsive Controls\">Responsive Controls<\/a><\/li>\n<li id=\"menu-item-271\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-271\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/multi-select-operations\/\" title=\"Multi Select Operations\">Multi Select Operations<\/a><\/li>\n<li id=\"menu-item-272\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-272\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/copy-and-paste\/\" title=\"Copy and Paste\">Copy and Paste<\/a><\/li>\n<li id=\"menu-item-274\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-274\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/overview-tatsu\/copy-and-paste-module-styles\/\" title=\"Copy and Paste Module Styles\">Copy and Paste Module Styles<\/a><\/li>\n<li id=\"menu-item-275\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-275\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/overview-tatsu\/keyboard-shortcuts\/\" title=\"Keyboard Shortcuts\">Keyboard Shortcuts<\/a><\/li>\n<li id=\"menu-item-273\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-273\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/overview-tatsu\/global-sections\/\" title=\"Global Sections\">Global Sections<\/a><\/li>\n<\/ul><\/div><\/div><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><\/div><style>.tatsu-row > .tatsu-fzh2nfa4rccx4ri5.tatsu-column{width: 25%;}.tatsu-fzh2nfa4rccx4ri5.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: none;}.tatsu-fzh2nfa4rccx4ri5 > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-fzh2nfa4rccx4ri5 > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-fzh2nfa4rccx4ri5 > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-fzh2nfa4rccx4ri5 > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-fzh2nfa4rccx4ri5.tatsu-column{width: 25%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-fzh2nfa4rccx4ri5.tatsu-column{width: 25%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-fzh2nfa4rccx4ri5.tatsu-column{width: 100%;}}<\/style><\/div><div  class=\"tatsu-column  tatsu-column-no-bg tatsu-three-fourth tatsu-column-image-none tatsu-column-effect-none  tatsu-fzh2nfads4flesvv\" data-animation=\"fadeIn\"   data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner \" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-ry-mx4L7N   \" data-animation=\"fadeIn\"  ><style>.tatsu-ry-mx4L7N .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-ry-mx4L7N .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h3>Responsive Controls<\/h3>\n<p>To make the layout of your web page optimised on all screen sizes, we have included Responsive controls for various settings in Tatsu. Modifying a setting responsively is pretty straight forward in TATSU as you will have visual preview of the screen on which you are making the edits. The option to change the view port is present in Bottom Bar of the Left Panel.\u00a0<\/p>\n<\/div><\/div><div  class=\"tatsu-single-image tatsu-module tatsu-image-lazyload tatsu-B1sfGEL74  \" data-animation=\"fadeIn\"  ><div class=\"tatsu-single-image-inner \" style=\"width : 602px;\" ><div class = \"tatsu-single-image-padding-wrap\" style = \"padding-bottom : 74.750830564784%;\" ><\/div><img class = \"tatsu-gradient-border\" alt = \"\" title = \"responsive-options\" data-src = \"https:\/\/exponentwptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2019\/01\/responsive-options.jpg\" src =\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"  \/><\/div><style>.tatsu-B1sfGEL74{margin: 0px 0px 30px 30px;}.tatsu-B1sfGEL74 .tatsu-single-image-inner{border-style: solid;border-width: 5px;border-color: rgba(239,239,239,1); max-width: 60%;}.tatsu-B1sfGEL74.tatsu-single-image{transform: translate3d(0px,0px, 0);}<\/style><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-H1ACl4ImV   \" data-animation=\"fadeIn\"  ><style>.tatsu-H1ACl4ImV .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-H1ACl4ImV .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p>While editing the settings of any module in TATSU, you need to look for a small monitor icon beside the label of the setting. This icon means, the field can be changed responsively.\u00a0<\/p>\n<\/div><\/div><div  class=\"tatsu-single-image tatsu-module tatsu-image-lazyload tatsu-rymZmNI7V  \" data-animation=\"fadeIn\"  ><div class=\"tatsu-single-image-inner \" style=\"width : 590px;\" ><div class = \"tatsu-single-image-padding-wrap\" style = \"padding-bottom : 52.203389830508%;\" ><\/div><img class = \"tatsu-gradient-border\" alt = \"\" title = \"responsive-icon\" data-src = \"https:\/\/exponentwptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2019\/01\/responsive-icon-2.jpg\" src =\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"  \/><\/div><style>.tatsu-rymZmNI7V{margin: 0px 0px 30px 30px;}.tatsu-rymZmNI7V .tatsu-single-image-inner{border-style: solid;border-width: 5px;border-color: rgba(239,239,239,1); max-width: 60%;}.tatsu-rymZmNI7V.tatsu-single-image{transform: translate3d(0px,0px, 0);}<\/style><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-Syhz-4U7E   \" data-animation=\"fadeIn\"  ><style>.tatsu-Syhz-4U7E .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-Syhz-4U7E .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p>Just click on the icon, and 4 icons representing view ports will be seen. Click on each view port icon to edit the value of that setting. Once you click on the view port, the display on right panel will also be changed so you can view your changes instantly.\u00a0<\/p>\n<\/div><\/div><div  class=\"tatsu-single-image tatsu-module tatsu-image-lazyload tatsu-BJJDzN874  \" data-animation=\"fadeIn\"  ><div class=\"tatsu-single-image-inner \" style=\"width : 596px;\" ><div class = \"tatsu-single-image-padding-wrap\" style = \"padding-bottom : 55.03355704698%;\" ><\/div><img class = \"tatsu-gradient-border\" alt = \"\" title = \"responsive-fieldset\" data-src = \"https:\/\/exponentwptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2019\/01\/responsive-fieldset.jpg\" src =\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"  \/><\/div><style>.tatsu-BJJDzN874{margin: 0px 0px 30px 30px;}.tatsu-BJJDzN874 .tatsu-single-image-inner{border-style: solid;border-width: 5px;border-color: rgba(239,239,239,1); max-width: 60%;}.tatsu-BJJDzN874.tatsu-single-image{transform: translate3d(0px,0px, 0);}<\/style><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-Bk1z96UXE   \" data-animation=\"fadeIn\"  ><style>.tatsu-Bk1z96UXE .tatsu-inline-text-inner{width: 100%;text-align: left;background-color: rgba(234,242,249,1);padding: 30px 30px 30px 30px;}@media only screen and (max-width: 767px) {.tatsu-Bk1z96UXE .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h6><span class=\"palette-0\">NOTE<\/span> &#8211;\u00a0<\/h6>\n<p>1. The changes made in the responsive settings will only be applied for the particular device. For ex. if you are modifying the Padding Value for Laptop device, the change will apply only for Laptop screens and Tablet and Mobile will still hold the default values.\u00a0<\/p>\n<p>2. Device Size Window &#8211;\u00a0<\/p>\n<p><span style=\"font-size: 17px; letter-spacing: 0px;\"><strong>Mobile<\/strong> < 767px<\/span><br \/><span style=\"font-size: 17px; letter-spacing: 0px;\"><strong>Tablet<\/strong> \u2013 \u00a0768px \u2013 1024px<\/span><br \/><span style=\"font-size: 17px; letter-spacing: 0px;\"><strong>Laptops<\/strong> \u2013 1025px \u2013 1377px<\/span><br \/><span style=\"font-size: 17px; letter-spacing: 0px;\"><strong>Desktops<\/strong> \u2013 > 1378px<\/span><\/p>\n<\/div><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><\/div><style>.tatsu-row > .tatsu-fzh2nfads4flesvv.tatsu-column{width: 75%;}.tatsu-fzh2nfads4flesvv.tatsu-column > .tatsu-column-inner > .tatsu-column-pad-wrap > .tatsu-column-pad{padding: 0px 0px 0px 40px;}.tatsu-fzh2nfads4flesvv.tatsu-column > .tatsu-column-inner{border-width: 0px 0px 0px 1px;border-color: rgba(237,237,237,1); }.tatsu-fzh2nfads4flesvv.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: none;}.tatsu-fzh2nfads4flesvv > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-fzh2nfads4flesvv > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-fzh2nfads4flesvv > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-fzh2nfads4flesvv > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}.tatsu-fzh2nfads4flesvv.tatsu-column{transform: translate3d(0px,0px, 0);}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-fzh2nfads4flesvv.tatsu-column{width: 75%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-fzh2nfads4flesvv.tatsu-column{width: 75%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-fzh2nfads4flesvv.tatsu-column{width: 100%;}}<\/style><\/div><\/div><\/div><\/div><div class=\"tatsu-section-background-wrap\"><div class = \"tatsu-section-background\" ><\/div><\/div><style>.tatsu-fzh2nfa4kv755cjg .tatsu-section-pad{padding: 90px 0px 90px 0px;}.tatsu-fzh2nfa4kv755cjg > .tatsu-bottom-divider{z-index: 9999;}.tatsu-fzh2nfa4kv755cjg > .tatsu-top-divider{z-index: 9999;}<\/style><\/div>\n","protected":false},"excerpt":{"rendered":"<div><a href=\"https:\/\/exponentwptheme.com\/documentation\/responsive-controls\/\" class=\"exp-read-more exp-read-more-underlined\">Read More<\/a><\/div>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-148","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/pages\/148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/comments?post=148"}],"version-history":[{"count":0,"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/pages\/148\/revisions"}],"wp:attachment":[{"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/media?parent=148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}