Title: Control responsive css breakpoints Last modified: February 22, 2020 --- # Control responsive css breakpoints * [Daniel](https://wordpress.org/support/users/damen02/) * (@damen02) * [6 years, 4 months ago](https://wordpress.org/support/topic/control-responsive-css-breakpoints/) * Hi. Your’s is one of the best Gutenberg plugins. * I noted every block has three icons to control stuff on different screen sizes( large, tablet, mobile), and this is awesome! * Question is: Is there a way to control the width of CSS breakpoints in which this three icons take effect? * I need to control a site views on wide screens, notebook and cell-phones, but don’t need tablet. Plus, when I go to Settings > Kadence Blocks, at bottom page I only see two max widths. I don’t understand if they are related to the 3 icons mentioned above. * Thanks! Viewing 11 replies - 1 through 11 (of 11 total) * Plugin Contributor [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/) * (@britner) * [6 years, 4 months ago](https://wordpress.org/support/topic/control-responsive-css-breakpoints/#post-12475447) * Hey, I’m working on a way to filter those media queries for developers who want to change from the traditional desktop, tablet, mobile. It’s on my list to add soon. * > Plus, when I go to Settings > Kadence Blocks, at bottom page I only see two > max widths. I don’t understand if they are related to the 3 icons mentioned > above. * That doesn’t have to do with the responsive settings. that has to do with the editor width if your theme, for example, is not defining a width for the Gutenberg editor. More and more themes are updated for gutenberg these days so it’s less useful. * Ben * Thread Starter [Daniel](https://wordpress.org/support/users/damen02/) * (@damen02) * [6 years, 4 months ago](https://wordpress.org/support/topic/control-responsive-css-breakpoints/#post-12481810) * Hi Ben, thanks for your soon answer. I’m glad to hear that. I like the way you keep the things simple! * In the meanwhile, is there any chance you suggest me a couple of CSS lines to control that. Or may be you could point me to the file/line were I could play a little with that? * Thanks a lot! Daniel (from Argentina 🙂 * Plugin Contributor [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/) * (@britner) * [6 years, 4 months ago](https://wordpress.org/support/topic/control-responsive-css-breakpoints/#post-12487961) * Hey, there wouldn’t be any small css changes you could make, the media queries are part of the css files as well as the dynamic css generated. It’s in part why this is so tricky to implement. I suggest for now you target whatever you need to target outside of the tools inside Gutenberg. * Ben * Thread Starter [Daniel](https://wordpress.org/support/users/damen02/) * (@damen02) * [6 years, 4 months ago](https://wordpress.org/support/topic/control-responsive-css-breakpoints/#post-12496608) * I’ll do that with Custom CSS. And wait for the news. Thanks again! 🙂 * [Nick Murray](https://wordpress.org/support/users/nickfmc/) * (@nickfmc) * [6 years, 1 month ago](https://wordpress.org/support/topic/control-responsive-css-breakpoints/#post-12876605) * This is definitely the biggest issue I have with the Kadence Row block is not being able to match to my themes breakpoints! A lot of content gets way too squished before going to 1 column, even having an overide for “Break to one column at __px” as an overide on the row would be super useful * [Nick Murray](https://wordpress.org/support/users/nickfmc/) * (@nickfmc) * [6 years, 1 month ago](https://wordpress.org/support/topic/control-responsive-css-breakpoints/#post-12876749) * I Have a quick and dirty solution in the meantime. I created some block variations on the row layout…then used css to go to 100% columns earlier based on those breakpoints. It is obviously not perfect and not going to allow you to make a 4 column layout into a 2 column then to a 1 but in a place where you have a 3 column layout at least I can control when it goes to 100% * ``` wp.blocks.registerBlockStyle( 'kadence/rowlayout', { name: 'bk-p-large', label: 'Break Point Large' }, ); ``` * [hannah](https://wordpress.org/support/users/hannahritner/) * (@hannahritner) * [6 years, 1 month ago](https://wordpress.org/support/topic/control-responsive-css-breakpoints/#post-12884091) * Hey [@nickfmc](https://wordpress.org/support/users/nickfmc/), In the Structure Settings of the Row Layout Block settings you can enable “Content Max Width Inherit from Theme?”. Is that what you’re after? * Hannah * [Nick Murray](https://wordpress.org/support/users/nickfmc/) * (@nickfmc) * [6 years, 1 month ago](https://wordpress.org/support/topic/control-responsive-css-breakpoints/#post-12900060) * [@hannahritner](https://wordpress.org/support/users/hannahritner/) no, this will set the max width but this is about When those columns breakpoint is that sets the columns to 100%. but the Kadence breakpoints for tablet where you can change the column layout based on device size are fixed at 1024px and if your theme uses a different number for your breakpoints there doesn’t seam to be any overide for these front end tablet/mobile sizings. * Plugin Contributor [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/) * (@britner) * [6 years, 1 month ago](https://wordpress.org/support/topic/control-responsive-css-breakpoints/#post-12906480) * [@nickfmc](https://wordpress.org/support/users/nickfmc/) This is on my list as a feature to add, I’m not sure yet when it will be included. * Ben * [topknot69](https://wordpress.org/support/users/topknot69/) * (@topknot69) * [6 years ago](https://wordpress.org/support/topic/control-responsive-css-breakpoints/#post-13128544) * This is probably not the place to ask but, since there is no listing for the Kadence Theme on wordpress,org. . . * It seems that the css in Kadence is delivered through the minified files xxxxx. min.css and the sources are in src/xxxx.scss * I want to change the tablet breakpoints from 1024/1025 (apparently set in _custom- properties.scss) to something slightly smaller since a 1024 pixel page on a tablet is perfectly capable of displaying a sidebar. * Can I change the sources and rebuild the css? Or is there some other way to change that breakpoint globally? Or is this only something likely to be in a premium theme? * My experience with WP is very old and a lot has changed in the ten years since I last had to mess with this stuff. * Plugin Contributor [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/) * (@britner) * [5 years, 12 months ago](https://wordpress.org/support/topic/control-responsive-css-breakpoints/#post-13153419) * Hey, Best to use this form here: [https://www.kadencewp.com/free-support/](https://www.kadencewp.com/free-support/) until the new theme gets into the repo. * In terms of your question, it would be best to just override the css for the sidebar based on what screen/device you are targeting. For example, you can add this in your customizer > custom css: * ``` @media screen and (min-width: 1020px) { .has-sidebar .content-container { display: grid; grid-template-columns: 5fr 2fr; grid-gap: var(--global-xl-spacing); justify-content: center; } } ``` * I hope that helps, * Ben Viewing 11 replies - 1 through 11 (of 11 total) The topic ‘Control responsive css breakpoints’ is closed to new replies. * ![](https://ps.w.org/kadence-blocks/assets/icon-256x256.png?rev=3178382) * [Kadence Blocks — Page Builder Toolkit for Gutenberg Editor](https://wordpress.org/plugins/kadence-blocks/) * [Frequently Asked Questions](https://wordpress.org/plugins/kadence-blocks/#faq) * [Support Threads](https://wordpress.org/support/plugin/kadence-blocks/) * [Active Topics](https://wordpress.org/support/plugin/kadence-blocks/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/kadence-blocks/unresolved/) * [Reviews](https://wordpress.org/support/plugin/kadence-blocks/reviews/) * 11 replies * 5 participants * Last reply from: [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/) * Last activity: [5 years, 12 months ago](https://wordpress.org/support/topic/control-responsive-css-breakpoints/#post-13153419) * Status: not resolved