Support » Plugin: Kadence Blocks – Gutenberg Page Builder Toolkit » 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 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Ben Ritner – Kadence WP

    (@britner)

    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

    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 πŸ™‚

    Plugin Author Ben Ritner – Kadence WP

    (@britner)

    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

    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'
      },
    );
    hannah

    (@hannahritner)

    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

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.