How to Make Kadence Blocks Responsive

Link to the blog post
https://matchlessweb.com/how-to-make-...

It can be challenging to get any Gutenberg block builder to be responsive. Kadence Blocks makes it easy to make your content responsive as long as you know how to tweak it.

This video teaches you how to use HTML line breaks and non-breaking spaces within the Kadence Advanced Heading Block to make lines of text break or wrap exactly how you want.

You'll also learn how to use padding/margin most effectively when making your designs responsive.

I recommend using padding in percentage units on any columns nested in Row Blocks. And use padding in pixel units for Row Block top and bottom padding. This allows your content to maintain consistent spacing across all screen sizes.

Tools used in this video (affiliate links):

Kadence Theme & Blocks
https://matchlessweb.com/kadence

CSS for Divi course by BeSuperfly
https://cssfordivi.com/

Hoverify Chrome Extension
https://www.tryhoverify.com/

Other plugins, tools, and resources mentioned or used in the video:

Simple CSS (page-specific CSS)
https://wordpress.org/plugins/simple-...

DocketWP (checklists within WP Admin)
https://docketwp.com/

Dash Reference (API Documentation Browser and *Code Snippet Manager)
https://kapeli.com/dash

*code snippet manager feature not demonstrated in this video

BeSuperFly Tutorial: Google Chrome Inspect Element Tutorial for Divi
Google Chrome Inspect Element Tutoria...

My Website
https://matchlessweb.com/

• #people_blogs
• #kadence_blocks
• #cadence_blocks
• #wordpress