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
(@damen02)
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 🙂
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
(@damen02)
I’ll do that with Custom CSS.
And wait for the news.
Thanks again! 🙂
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
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'
},
);
Hey @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
@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.
@nickfmc This is on my list as a feature to add, I’m not sure yet when it will be included.
Ben
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.
Hey,
Best to use this form here: 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
