jordesign

<p>=Preview your site at random page widths to test your Responsive design.=</p>
<p>WP Responsive Preview provides an additional previewing options for your site. Loading a Responsive Preview will load the page in a flexible framework at a random width, helping you see how your page looks at different widths. It also lets you re-randomise the width quickly, to test multiple widths.</p>
<p>This plugin is based entirley on [ish. from Brad Frost][http://bradfrostweb.com/demo/ish/] – a great standalone tool for previewing your site at random widths. His post does the best job of explaining the reasoning behind ish. (and therefore WP Responsive Preview).</p>
<p>“The real reasons for this tool is to educate and to facilitate a mental shift. Many clients, designers and developers get hung up on specific device widths, which is why this tool doesn’t include any such language, device chrome or anything like that. Ish. helps keep everyone focused on making a design that looks and functions great at any resolution.”</p>


WordPress Responsive Preview

Preview your site at random page widths to test your Responsive design.

landwire

<p>Responsive Block Control adds responsive toggles to a “Visibility” panel of the block editor (i.e Gutenberg), to show or hide blocks according to screen width.</p>
<h4>Limitations</h4>
<p>Does not work with the Classic Block, Widget Block or Widget Area Block [‘core/freeform’, ‘core/legacy-widget’, ‘core/widget-area’], as the those blocks do not support block attributes. Does also not work with the HTML Block [‘core/html’] inside the Widget Screen, as this one also does not support block attributes there.</p>
<h3>Configuration</h3>
<h4>Override existing breakpoints</h4>
<pre><code>function override_responsive_block_control_breakpoints($break_points) {
     $break_points['base'] = 0;
     $break_points['mobile'] = 400;
     $break_points['tablet'] = 800;
     $break_points['desktop'] = 1000;
     $break_points['wide'] = 1600;

     return $break_points;
 }

 add_filter('responsive_block_control_breakpoints', 'override_responsive_block_control_breakpoints');
</code></pre>
<h4>Stop css output completely</h4>
<pre><code> function override_responsive_block_control_add_css() {
      return false;
  }
  add_filter('responsive_block_control_breakpoints', 'override_responsive_block_control_add_css');
</code></pre>


Responsive Block Control – Hide blocks based on display width

This plugin does exactly what I need, without adding any extra bloat. Thanks!

Great simple plugin!

Responsive Block Control adds responsive toggles to a "Visibility" panel of the block editor (i.e Gutenberg), to show or hide blocks accordi …

WordPress Responsive Preview vs Responsive Block Control – Hide blocks based on display width