{"id":8111,"date":"2024-03-22T18:08:48","date_gmt":"2024-03-22T18:08:48","guid":{"rendered":"https:\/\/www.kadencewp.com\/help-center\/?post_type=docs&#038;p=8111"},"modified":"2026-04-23T14:44:29","modified_gmt":"2026-04-23T14:44:29","password":"","slug":"responsive-breakpoints","status":"publish","type":"docs","link":"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/responsive-breakpoints\/","title":{"rendered":"Responsive Breakpoints in Kadence"},"content":{"rendered":"\n<p>When building with Kadence products, you may want to adjust values for different screen sizes. For example, as you adjust the size of your browser screen width, you&#8217;ll notice the content on your site responds accordingly.<\/p>\n\n\n<style>.kb-image8111_12d431-5f .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image8111_12d431-5f size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1783\" height=\"1192\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/03\/Breakpoints.gif\" alt=\"Breakpoints\" class=\"kb-img wp-image-14395\" \/><\/figure>\n\n\n\n<p>The Kadence Theme, Kadence Blocks plugin, and other Kadence products generally use the following responsive breakpoints:<br><br><strong>Desktop: &gt; 1024px<br>Tablet: 768px &#8211; 1024px<br>Mobile: &lt; 768px<\/strong><\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading8111_c0dfc5-af, .wp-block-kadence-advancedheading.kt-adv-heading8111_c0dfc5-af[data-kb-block=\"kb-adv-heading8111_c0dfc5-af\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading8111_c0dfc5-af mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading8111_c0dfc5-af[data-kb-block=\"kb-adv-heading8111_c0dfc5-af\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading8111_c0dfc5-af img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading8111_c0dfc5-af[data-kb-block=\"kb-adv-heading8111_c0dfc5-af\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading8111_c0dfc5-af wp-block-kadence-advancedheading has-theme-palette-8-background-color has-background\" data-kb-block=\"kb-adv-heading8111_c0dfc5-af\"><em><strong>Note:<\/strong> These breakpoints apply specifically to <span style=\"text-decoration: underline\">Kadence Blocks<\/span> and <span style=\"text-decoration: underline\">not<\/span> Core WordPress Blocks.<\/em><\/p>\n\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id8111_102c73-e9 .kb-table-of-content-wrap{padding-top:0px;padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);}.kb-table-of-content-nav.kb-table-of-content-id8111_102c73-e9 .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id8111_102c73-e9 .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id8111_102c73-e9 .kb-table-of-content-wrap .kb-table-of-content-list{font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}<\/style>\n\n\n<h2 class=\"wp-block-heading\">Responsive Settings<\/h2>\n\n\n<style>.kb-row-layout-id8111_594a5d-83 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id8111_594a5d-83 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id8111_594a5d-83 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id8111_594a5d-83 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id8111_594a5d-83 > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id8111_594a5d-83 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id8111_594a5d-83 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column8111_0bb8d7-a5 > .kt-inside-inner-col,.kadence-column8111_0bb8d7-a5 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column8111_0bb8d7-a5 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column8111_0bb8d7-a5 > .kt-inside-inner-col{flex-direction:column;}.kadence-column8111_0bb8d7-a5 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column8111_0bb8d7-a5 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column8111_0bb8d7-a5{position:relative;}@media all and (max-width: 1024px){.kadence-column8111_0bb8d7-a5 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column8111_0bb8d7-a5 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column8111_0bb8d7-a5\"><div class=\"kt-inside-inner-col\">\n<p>Some options through the Kadence theme and blocks include icons for desktop, tablet, and mobile devices. Clicking on one of these icons will update the setting for that screen size, allowing you to set a responsive option. The Kadence theme and blocks plugin have various responsive settings.<\/p>\n\n\n\n<p>For example, the Row Layout block has &#8220;Layout&#8221; settings that let you adjust the column layout. Just above the setting are the three breakpoint icons. Initially, the setting applies to desktop devices, but you can decide to add different settings for tablet and mobile devices. This allows you to turn a four-column row into a two-column row for tablets and a single column for mobile devices.<\/p>\n\n\n\n<p>Users sometimes want to know if they can customize these breakpoint values. However, there are no settings to change the breakpoints. If you need more control over styles at different screen widths, you must rely on media queries.<\/p>\n<\/div><\/div>\n\n\n<style>.kadence-column8111_0f7c19-b4 > .kt-inside-inner-col,.kadence-column8111_0f7c19-b4 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column8111_0f7c19-b4 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column8111_0f7c19-b4 > .kt-inside-inner-col{flex-direction:column;}.kadence-column8111_0f7c19-b4 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column8111_0f7c19-b4 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column8111_0f7c19-b4{position:relative;}@media all and (max-width: 1024px){.kadence-column8111_0f7c19-b4 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column8111_0f7c19-b4 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column8111_0f7c19-b4\"><div class=\"kt-inside-inner-col\"><style>.kb-image8111_7951a7-06 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image8111_7951a7-06\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"278\" height=\"713\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/03\/Row-Layout-Layout-Settings-breakpoints.jpeg\" alt=\"\" class=\"kb-img wp-image-8113\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/03\/Row-Layout-Layout-Settings-breakpoints.jpeg 278w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/03\/Row-Layout-Layout-Settings-breakpoints-117x300.jpeg 117w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/03\/Row-Layout-Layout-Settings-breakpoints-200x512.jpeg 200w\" sizes=\"auto, (max-width: 278px) 100vw, 278px\" \/><\/figure><\/div>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading8111_d7a619-49, .wp-block-kadence-advancedheading.kt-adv-heading8111_d7a619-49[data-kb-block=\"kb-adv-heading8111_d7a619-49\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading8111_d7a619-49 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading8111_d7a619-49[data-kb-block=\"kb-adv-heading8111_d7a619-49\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading8111_d7a619-49 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading8111_d7a619-49[data-kb-block=\"kb-adv-heading8111_d7a619-49\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 class=\"kt-adv-heading8111_d7a619-49 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading8111_d7a619-49\">WordPress Editor Preview vs. Kadence Responsive Breakpoints<\/h3>\n\n\n<style>.kb-row-layout-id8111_11980a-30 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id8111_11980a-30 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id8111_11980a-30 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);grid-template-columns:minmax(0, 2fr) minmax(0, 1fr);}.kb-row-layout-id8111_11980a-30 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id8111_11980a-30 > .kt-row-column-wrap{grid-template-columns:minmax(0, 2fr) minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id8111_11980a-30 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id8111_11980a-30 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-left-golden kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column8111_b15fed-3e > .kt-inside-inner-col,.kadence-column8111_b15fed-3e > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column8111_b15fed-3e > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column8111_b15fed-3e > .kt-inside-inner-col{flex-direction:column;}.kadence-column8111_b15fed-3e > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column8111_b15fed-3e > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column8111_b15fed-3e{position:relative;}@media all and (max-width: 1024px){.kadence-column8111_b15fed-3e > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column8111_b15fed-3e > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column8111_b15fed-3e\"><div class=\"kt-inside-inner-col\"><style>.wp-block-kadence-advancedheading.kt-adv-heading8111_8cbbf7-97, .wp-block-kadence-advancedheading.kt-adv-heading8111_8cbbf7-97[data-kb-block=\"kb-adv-heading8111_8cbbf7-97\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading8111_8cbbf7-97 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading8111_8cbbf7-97[data-kb-block=\"kb-adv-heading8111_8cbbf7-97\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading8111_8cbbf7-97 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading8111_8cbbf7-97[data-kb-block=\"kb-adv-heading8111_8cbbf7-97\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading8111_8cbbf7-97 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading8111_8cbbf7-97\">When using the <strong>Responsive Controls<\/strong> in Kadence Blocks, you\u2019ll notice the editor automatically adjusts its screen width as you switch between the desktop, tablet, and mobile icons. These screen widths are based on <strong>WordPress Core\u2019s built-in responsive preview sizes<\/strong>.<\/p>\n<\/div><\/div>\n\n\n<style>.kadence-column8111_ca2b70-b1 > .kt-inside-inner-col,.kadence-column8111_ca2b70-b1 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column8111_ca2b70-b1 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column8111_ca2b70-b1 > .kt-inside-inner-col{flex-direction:column;}.kadence-column8111_ca2b70-b1 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column8111_ca2b70-b1 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column8111_ca2b70-b1{position:relative;}@media all and (max-width: 1024px){.kadence-column8111_ca2b70-b1 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column8111_ca2b70-b1 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column8111_ca2b70-b1\"><div class=\"kt-inside-inner-col\"><style>.kb-image8111_023d77-24 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image8111_023d77-24 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1620\" height=\"1606\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/03\/Editor-Preview-in-Mobile.jpg\" alt=\"Editor Preview in Mobile\" class=\"kb-img wp-image-15829\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/03\/Editor-Preview-in-Mobile.jpg 1620w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/03\/Editor-Preview-in-Mobile-300x297.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/03\/Editor-Preview-in-Mobile-1024x1015.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/03\/Editor-Preview-in-Mobile-150x150.jpg 150w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/03\/Editor-Preview-in-Mobile-768x761.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/03\/Editor-Preview-in-Mobile-1536x1523.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/03\/Editor-Preview-in-Mobile-360x357.jpg 360w\" sizes=\"auto, (max-width: 1620px) 100vw, 1620px\" \/><\/figure>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kb-row-layout-id8111_ae5455-65 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id8111_ae5455-65 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id8111_ae5455-65 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);grid-template-columns:minmax(0, 2fr) minmax(0, 1fr);}.kb-row-layout-id8111_ae5455-65 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id8111_ae5455-65 > .kt-row-column-wrap{grid-template-columns:minmax(0, 2fr) minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id8111_ae5455-65 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id8111_ae5455-65 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-left-golden kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column8111_40e13b-02 > .kt-inside-inner-col,.kadence-column8111_40e13b-02 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column8111_40e13b-02 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column8111_40e13b-02 > .kt-inside-inner-col{flex-direction:column;}.kadence-column8111_40e13b-02 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column8111_40e13b-02 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column8111_40e13b-02{position:relative;}@media all and (max-width: 1024px){.kadence-column8111_40e13b-02 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column8111_40e13b-02 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column8111_40e13b-02\"><div class=\"kt-inside-inner-col\"><style>.wp-block-kadence-advancedheading.kt-adv-heading8111_710b9d-a5, .wp-block-kadence-advancedheading.kt-adv-heading8111_710b9d-a5[data-kb-block=\"kb-adv-heading8111_710b9d-a5\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading8111_710b9d-a5 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading8111_710b9d-a5[data-kb-block=\"kb-adv-heading8111_710b9d-a5\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading8111_710b9d-a5 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading8111_710b9d-a5[data-kb-block=\"kb-adv-heading8111_710b9d-a5\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading8111_710b9d-a5 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading8111_710b9d-a5\">At the top right of the editor, you can also use the <strong>Core preview controls<\/strong> to switch between device views or open each view in a new tab. Both the Core preview options and Kadence\u2019s responsive controls use the same underlying WordPress Core behavior for screen width changes, ensuring a consistent experience within the editor.<\/p>\n<\/div><\/div>\n\n\n<style>.kadence-column8111_c3612e-39 > .kt-inside-inner-col,.kadence-column8111_c3612e-39 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column8111_c3612e-39 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column8111_c3612e-39 > .kt-inside-inner-col{flex-direction:column;}.kadence-column8111_c3612e-39 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column8111_c3612e-39 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column8111_c3612e-39{position:relative;}@media all and (max-width: 1024px){.kadence-column8111_c3612e-39 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column8111_c3612e-39 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column8111_c3612e-39\"><div class=\"kt-inside-inner-col\"><style>.kb-image8111_0a475b-cd .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image8111_0a475b-cd size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"859\" height=\"638\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/03\/Responsive-Editor-Settings.jpg\" alt=\"Responsive Editor Settings\" class=\"kb-img wp-image-15828\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/03\/Responsive-Editor-Settings.jpg 859w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/03\/Responsive-Editor-Settings-300x223.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/03\/Responsive-Editor-Settings-768x570.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/03\/Responsive-Editor-Settings-360x267.jpg 360w\" sizes=\"auto, (max-width: 859px) 100vw, 859px\" \/><\/figure>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading8111_0e06dc-a9, .wp-block-kadence-advancedheading.kt-adv-heading8111_0e06dc-a9[data-kb-block=\"kb-adv-heading8111_0e06dc-a9\"]{margin-bottom:0px;font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading8111_0e06dc-a9 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading8111_0e06dc-a9[data-kb-block=\"kb-adv-heading8111_0e06dc-a9\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading8111_0e06dc-a9 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading8111_0e06dc-a9[data-kb-block=\"kb-adv-heading8111_0e06dc-a9\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading8111_0e06dc-a9 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading8111_0e06dc-a9\">Kadence Blocks and the Kadence Theme apply specific responsive breakpoints to determine when styles switch between desktop, tablet, and mobile. These are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Mobile:<\/strong> less than 768px<\/li>\n\n\n\n<li><strong>Tablet:<\/strong> between 768px and 1024px<\/li>\n\n\n\n<li><strong>Desktop:<\/strong> greater than 1024px<\/li>\n<\/ul>\n\n\n\n<p>Because the WordPress editor preview is based on general device sizes, what you see in \u201cTablet View\u201d inside the editor may not exactly match how your design appears on the front end. The preview is helpful for quickly styling layouts for general screen sizes, but actual devices vary widely in resolution and pixel density.<br><br>As a result, a layout that looks correct in the editor\u2019s tablet or mobile preview may appear slightly different on real devices. For the most accurate results, we recommend <strong>previewing<\/strong> <strong>your<\/strong> <strong>design<\/strong> <strong>in<\/strong> <strong>a new tab<\/strong> and testing it in your browser using <strong>Inspector Tools<\/strong>, where you can manually adjust the viewport width or use device presets to see how your content responds across Kadence\u2019s actual breakpoint ranges.<\/p>\n\n\n<style>.kb-image8111_3c4184-02 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image8111_3c4184-02 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1414\" height=\"873\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/03\/Previewing-in-a-new-Tab.gif\" alt=\"Previewing in a new Tab\" class=\"kb-img wp-image-15830\" \/><\/figure>\n\n\n\n<p>Using the browser <em>Inspector Tools<\/em>, you can test your layout across various device sizes. You can also use <strong>Responsive Mode<\/strong> to manually adjust the screen width and see how your design adapts in real time.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading8111_7c85d7-28, .wp-block-kadence-advancedheading.kt-adv-heading8111_7c85d7-28[data-kb-block=\"kb-adv-heading8111_7c85d7-28\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading8111_7c85d7-28 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading8111_7c85d7-28[data-kb-block=\"kb-adv-heading8111_7c85d7-28\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading8111_7c85d7-28 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading8111_7c85d7-28[data-kb-block=\"kb-adv-heading8111_7c85d7-28\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 id=\"mobile-header\" class=\"kt-adv-heading8111_7c85d7-28 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading8111_7c85d7-28\">Mobile Headers<\/h2>\n\n\n<style>.kb-row-layout-id8111_24de49-8b > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id8111_24de49-8b > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id8111_24de49-8b > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id8111_24de49-8b > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id8111_24de49-8b > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id8111_24de49-8b > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id8111_24de49-8b alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column8111_ed8045-be > .kt-inside-inner-col,.kadence-column8111_ed8045-be > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column8111_ed8045-be > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column8111_ed8045-be > .kt-inside-inner-col{flex-direction:column;}.kadence-column8111_ed8045-be > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column8111_ed8045-be > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column8111_ed8045-be{position:relative;}@media all and (max-width: 1024px){.kadence-column8111_ed8045-be > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column8111_ed8045-be > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column8111_ed8045-be\"><div class=\"kt-inside-inner-col\">\n<p>Another responsive setting applies to the mobile header. You can set the screen width at which the header switches between the mobile and desktop headers. Navigate to <strong>Appearance &gt; Customize &gt; Header<\/strong>, then click on the Design tab. There is an option to set the &#8220;Screen size to switch to mobile header.&#8221; This setting sets the screen width (in pixels) at which the desktop header will turn into the mobile header. Screen widths lower than this setting will show the mobile header, and widths above this setting will show the desktop header.<\/p>\n<\/div><\/div>\n\n\n<style>.kadence-column8111_617209-ba > .kt-inside-inner-col,.kadence-column8111_617209-ba > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column8111_617209-ba > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column8111_617209-ba > .kt-inside-inner-col{flex-direction:column;}.kadence-column8111_617209-ba > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column8111_617209-ba > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column8111_617209-ba{position:relative;}@media all and (max-width: 1024px){.kadence-column8111_617209-ba > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column8111_617209-ba > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column8111_617209-ba\"><div class=\"kt-inside-inner-col\"><style>.kb-image8111_ea1390-86 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image8111_ea1390-86\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"329\" height=\"623\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/03\/screen-size-switch-mobile-header.png\" alt=\"\" class=\"kb-img wp-image-8114\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/03\/screen-size-switch-mobile-header.png 329w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/03\/screen-size-switch-mobile-header-158x300.png 158w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/03\/screen-size-switch-mobile-header-270x512.png 270w\" sizes=\"auto, (max-width: 329px) 100vw, 329px\" \/><\/figure><\/div>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading8111_555927-0b, .wp-block-kadence-advancedheading.kt-adv-heading8111_555927-0b[data-kb-block=\"kb-adv-heading8111_555927-0b\"]{font-size:var(--global-kb-font-size-md, 1.25rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading8111_555927-0b mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading8111_555927-0b[data-kb-block=\"kb-adv-heading8111_555927-0b\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading8111_555927-0b img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading8111_555927-0b[data-kb-block=\"kb-adv-heading8111_555927-0b\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading8111_555927-0b wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading8111_555927-0b\"><strong>Real-world examples for adjusting the \u201cScreen size to switch to mobile header\u201d setting:<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Show mobile menu on larger screen sizes<\/strong> \u2014 For example, if your menu items or other header widgets or elements break into multiple lines on smaller laptops or tablets, you can set a larger breakpoint so the mobile menu appears before the wrapping happens.<\/li>\n\n\n\n<li><strong>Always show mobile menu, even on desktop<\/strong> \u2014 Some users prefer the mobile menu layout for design or simplicity. You can set a very high breakpoint so the mobile menu displays on all devices.<\/li>\n\n\n\n<li><strong>Always show desktop menu, even on mobile<\/strong> \u2014 If you want the desktop menu visible on all screen sizes, set the breakpoint to a very low value so the mobile header never appears.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>When building with Kadence products, you may want to adjust values for different screen sizes. For example, as you adjust the size of your browser screen width, you&#8217;ll notice the content on your site responds accordingly. The Kadence Theme, Kadence Blocks plugin, and other Kadence products generally use the following responsive breakpoints: Desktop: &gt; 1024pxTablet:&#8230;<\/p>\n","protected":false},"author":143301,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":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,"_kad_post_classname":"","footnotes":""},"doc_category":[417],"doc_tag":[],"knowledge_base":[7,6],"class_list":["post-8111","docs","type-docs","status-publish","hentry","doc_category-block-tutorials","knowledge_base-kadence-blocks","knowledge_base-kadence-theme"],"year_month":"2026-05","word_count":739,"total_views":"10794","reactions":{"happy":"2","normal":"1","sad":"4"},"author_info":{"display_name":"gilberthernandez","author_link":"https:\/\/www.kadencewp.com\/help-center\/author\/gilberthernandez\/"},"doc_category_info":[{"term_name":"Block Tutorials","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-blocks\/block-tutorials\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"Kadence Blocks","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-blocks\/","term_slug":"kadence-blocks"},{"term_name":"Kadence Theme","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-theme\/","term_slug":"kadence-theme"}],"knowledge_base_slug":["kadence-blocks","kadence-theme"],"taxonomy_info":{"doc_category":[{"value":417,"label":"Block Tutorials"}],"knowledge_base":[{"value":7,"label":"Kadence Blocks"},{"value":6,"label":"Kadence Theme"}]},"featured_image_src_large":false,"comment_info":0,"_links":{"self":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/8111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/users\/143301"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/comments?post=8111"}],"version-history":[{"count":13,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/8111\/revisions"}],"predecessor-version":[{"id":16823,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/8111\/revisions\/16823"}],"wp:attachment":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media?parent=8111"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_category?post=8111"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_tag?post=8111"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/knowledge_base?post=8111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}