How to Make Kadence Blocks Responsive

[00:00:01.460]
What’s up, guys? It’s Jon at Matchless Web. And today this video is going to be about making Kadence Blocks responsive. Now, there’s a great deal of talk among any of the page builders or Gutenberg block builders’ responsiveness. And, you know, how responsive is something out of the box.

[00:00:28.640]
And with virtually any solution out there, even if it’s a child theme that you purchase, things don’t always come out of the box. Exactly. Responsive, maybe. At least not for the specific device breakpoints that you are interested in. And so I’m just going to show you how I have found my little solutions for responsiveness when using a Gutenberg block builder like Kadence Blocks. So I’m using one of the Kadence demo sites from their starter templates plugin. If you’ve never used that, it’s awesome.

[00:01:04.130]
You can just import a demo site right from the Kadence demo repository of sorts. Anyway, we’re going to look at starting with text responsiveness. So if you’ve ever found yourself wanting text to break at a certain point without having to maybe adjust the padding or margin on a row or setting some kind of max width to try to manipulate the text inside a container, this will be really helpful for you. And so what I’m going to do is I’ve got the back end of this page opened up and will be working within this Advanced Heading Block.

[00:01:52.290]
So if you’ve never used this before, if you click the three little dots out to the side of most blocks, you have an option to edit as HTML. And if you click that it converts the block into HTML for you to, then you can click in and, you know, make some edits. And then when you’re finished making your changes, you just click back to edit visually and the block is restored to, you know, the more visually-friendly mode.

[00:02:26.330]
But I’m going to show you how to use some little HTML elements to tweak this.

[00:02:31.100]
So, before going further, make sure. Yes, I have my to-do list here. Polypane. Polypane is my go-to, responsiveness testing tool. It’s just a browser that’s made for, responsiveness testing. And basically you can preview a page, and as you scroll one, you see what the scroll nature kind of looks like across other devices. I think I just made up a term scroll nature, whatever that is.

[00:03:02.900]
But, you know, you can see how is text breaking across different, different devices.

[00:03:08.270]
So, I’ve got the this is an iPad 12 (Pro) in the dimensions of the devices are displayed up here, if you can see this, as well as a, seventh generation iPad, iPhone eleven. But you can set a variety of device breakpoints. And I’ve got a high definition, desktop view here. But anyway, if I were to zoom out, kind of see all these kind of all at once.

[00:03:35.750]
So if there’s a certain device breakpoint where I’m seeing, something funky happening, if I want to make a really specific change, like let’s say, hey, at this seventh gen iPad, with a width of eight hundred and ten pixels, I might have to write a custom media query for that. We’re not going to get into that in this video. We’ll just go with the default breakpoints of the Kadence theme. But for testing purposes, we’ll reference this.

[00:04:06.860]
Okay. So we’ll come back to Polypane momentarily.

[00:04:11.150]
OK. So if you go to edit visually, sorry. Come out of it it visually into edit HTML.

[00:04:19.880]
We’re going to experiment with a line break. So let’s say I wanted this for some reason. I wanted this line of text to cut off at cheer yourself and I wanted the next bit of text to go to that, word up on the next line, come back to it visually. Now, that might actually be how it was already broken. So that might not have done anything at all. That was a really bad example.

[00:04:51.860]
How about we do this? Let’s say I want the line to break between cheer and yourself because those are already together.

[00:04:59.380]
OK.

[00:04:59.870]
So, I’m just gonna cut out that break and. Oops, don’t need a slash there. OK, now come back to edit visually. And so now you see the text is automatically jump down.

[00:05:17.300]
We have a line break. So now if we were to save that page and then, preview it on the front end, we would see that now the word cheer is on its own line and then everything else follows suit. And if I were to refresh in Polypane, I could see how that acts across different devices. Some of those mobile, layouts were already, using that single word cheer. But now you can see on these larger device sizes that’s also being treated that way.

[00:05:54.200]
So if you’re ever just like, hey, I just need that one word, or I need this big block of text to break at this specific point, then you just put in a line break. All right. So let’s come back here and let’s look at another helpful thing. OK, so if I remove the line breaks, it will put that back to how it was and come back to visual. All right. So let’s say that within my line break, I never want, let’s say I never want there to be, I believe that’s called an orphan or a widow.

[00:06:31.700]
I can’t remember which ones which. But when you have a single word that falls onto a line by itself, whatever that’s called, if you don’t want that to happen, here’s what you do. We use what’s called non-breaking space. So you basically remove the, the space between the two words that you want to have stick together more or less. You type your ampersand n b s p non-breaking space and then semicolon.

[00:07:03.080]
And that means that there will never be a time where, these two words are not side-by-side. So it’s a non-breaking space. So where we did have, the word print jumping down to the next line by itself. Now, whenever we refresh, we will always see, the word new in print together. So that’s pretty handy. If I come back to Polypane. Refresh. So we’re seeing both that change of having removed the, line break here.

[00:07:45.410]
OK, from cheer and yourself. But also now we see the non-breaking space between the word new and print. And you see, since that change is made, you know, in the desktop setting that is being applied all the way down to the mobile. In fact, if you actually if you wanted this change to only apply to one specific layout, you’d take a different approach. This is applying across all device sizes, because you’re adjusting that HTML of the block itself.

[00:08:19.490]
So, at least right now, Kadence doesn’t have, the Kadence Blocks don’t have a like device size-specific content, option to where I know in Divi it’s an option to where you could have one bit of text, you know, or a certain image display at this desktop break point. But if you switch to mobile you might get a different image or a different, you know, text or layout where you could, you know, insert those line breaks or no parking spaces wherever you like.

[00:08:53.450]
But right now, if you wanted to do that within, Kadence, I won’t get into exactly what you need to do, but you might do some, like, page. I can’t say the word specific CSS, using something like, my preferred plugin is called Simple CSS made by Tom, who is the developer behind GeneratePress and GenerateBlocks where basically if you install Simple CSS, you can either have a stylesheet that applies to your entire website or per page or per post.

[00:09:24.890]
You could have any rules that you enter here only apply to that one page. And so if you say, had applied a, let’s say to this, heading block, you could maybe add a CSS class, say I was just calling my class and any, any change that you wanted to make to just a specific block. You could use that. My class. Oops. And and you could, you know, give some rule of some kind, I don’t have a good example right now, but, I just wanted to throw that in page-specific CSS.

[00:10:09.640]
That’s a that can be really handy thing. And then you’re not loading unneeded CSS on every page of your site. You’re just putting it in one little place that you need it.

[00:10:17.450]
OK, let us and when I say us, I mean “me”. Look back here. OK, so we’ve done line break, non-breaking space, overflow-wwrap.

[00:10:27.700]
OK, so I’m going to pull up this resource. This is the this app is called Dash is the Dash Reference. It is just a desktop reference for any kinds of, frameworks or coding languages or whatever. If you’re using things, I don’t know, code persay, but I do, you know, dabble with some HTML or CSS from time to time. So if I search in my CSS reference for anything CSS-wise that I’m interested in learning about, if we look at this overflow-wwrap, this is really helpful.

[00:11:10.390]
So if let’s say you have a really long word that let’s say you need it to break, but the default overflow-wrap state has a really long word that is just maybe going outside of a container, or, you know, it’s for some reason not honoring the padding you’ve got on a container or something.

[00:11:33.100]
We can apply overflow wrap break word and that will take any long word that is going outside of its container and just force it to wrap at whatever dimensions are set for the container that it’s in. And I think the example that I want to use let’s look at word wrap. Scroll down this page. There’s a good example. Wait, was that the one I was on? I think I was already on that. The overflow wrap. I’m losing my mind, yall. I don’t know where the example that I wanted to show.

[00:12:18.920]
Wrapping and breaking text, this is the one. OK, OK, so breaking long words. So this is an example of using overflow wrap to say let’s say that you had a box that was a container that was 350 pixels wide. And if you say overflow wrap break word, then it takes that really long word and it forces it to stay within the container. But if you just said normal, more normal, I can’t spell normal. Then that text goes outside of its container.

[00:12:58.710]
So if you if you ever run into needing to let a word not overflow, we say break word. But if you need a long word to stay on its own line and you don’t want it to break, then you would say, overflow wrap normal. So I hope that’s helpful. There are occasions where, you may need to use something like that. So I just thought it was worth mentioning and all of these little tips that I’ve just shown you on the just messing with your text and using some little maybe HTML or CSS stuff.

[00:13:38.600]
A lot of that I picked up in a much “slept-on” CSS course by BeSuperfly John Wooten at BeSuperfly. He’s got a course of success for Divi. So yeah, it was maybe it’s taught around the Divi theme, but the CSS that is taught in the course, I mean you can use it for literally anything, WordPress or not. So whatever theme or framework you use, this is a really great course, really thorough. There’s like sixteen hours of content.

[00:14:10.010]
Yeah. And it’s like fifty bucks. So if you’re in the market for trying to learn CSS or just need to watch a pro watch a seasoned pro do some really neat things with CSS in whatever theme you use, it’s really, really helpful. You can preview a couple of little lessons. You can see the course outline. There are some videos in here where you can kind of see some example lessons as a video module replacing an icon, the native Divi play icon, with a custom icon in that example and some other fun things.

[00:14:45.470]
In fact, John Wooten’s YouTube video on using Google Chrome inspect element using Chrome developer tools, watching his video on YouTube, about that was the first place I learned how to use, developer tools. You know, where you right click and you pull up your your little, window where you can examine the CSS of a page. That’s where I learned my CSS in the early days. So, that is a great course.

[00:15:17.870]
And John Wooten is a really great guy to follow. So I just had to mention that, OK. Anything else I wanted to. Yes, recommended the course. OK, so the very last thing I want to get to now, so we’ve addressed really just manipulating text by itself normally. Now, if you if you’re not familiar with using the line breaks, non-breaking spaces or maybe an overflow wrap up with custom using a custom CSS class, maybe to target your your text to apply some kind of overflow wrap behavior, which again, I know I’m going back and forth.

[00:16:00.860]
If you have a custom class on some element and you only want the CSS rule applying to that page, you would, you know, apply your overflow wrap rule. Again, I can’t type I’m like looking around this microphone, you would you would apply your rule. You know. Something like this, or overflow wrap normal. That’s how you can make a page-specific CSS rule. But anyway, so now that we’re done talking about the you individual text itself, another thing that, can be helpful for people to know is when you’re within Kadence, if you’re working within a Row block, there, is a setting under structure settings for max width.

[00:16:48.950]
So if you want the content within a row to stay within a specific, you know, pixel width, we could let’s just break this layout really quickly and say, hey, on desktop, we only want this to be five hundred pixels. You can set it, you know, by device size, but let’s say desktop, five hundred pixels really quickly so that updates. Let us come out and refresh the home page. So now the text within this, single column, you know, if this row is now squished into no wider than 500 pixels, if we were to.

[00:17:32.890]
I’m using an app here called Hoverify. It’s a Chrome extension to just pull up some CSS and not have to go into dev tools. You can see that the max width for this div has been applied at 500 pixels. So if you’ve ever tried to manipulate your text by adjusting the, you know, the absolute max width of a container, you know, by doing some kind of adjustment on the fly. I see.

[00:18:04.120]
That didn’t take… Oh is it because I paused it? I might have made something happen there, you can normally edit CSS just live on the fly, just like you would individuals using Hoverify, but I may have done something weird when I paused it. Anyway, if you’re used to using either padding or margin to try to smush your text to do what you want it to do, I would say, like, yeah, let’s not do that.

[00:18:32.740]
Let’s let’s instead of adjusting the max width of a container to try to manipulate that or, you know, trying to smush down your column width, you know, by doing something like this to try to get the text to break how you want or even, doing something like. So if we go into the column. All right. So our Advanced Header block is inside a column, sometimes you may have even in the past applied either some pixel, pixel width, to give yourself a certain padding to try to make the text break in a certain way, you know, doing something like this.

[00:19:14.620]
And that’s just going to be problematic, as you, if those things are if those settings are inherited, you know, down to your different device settings, you start trying to have to apply either certain pixel dimensions to each individual breakpoint that you’re given or any custom media queries you’ve got to put in. You know, of course, if you used units like percentages, this can actually be helpful. So I do want to address this.

[00:19:43.390]
If you ever do need to apply padding to. Something that’s in a Kadence Block row, I say do it in the column, and I think this is something that Ben Ritner, the developer behind Kadence Blocks and [Kadence] theme has recommended. And because I’ve noticed in the past, whenever if you tried to make a, a device, a breakpoint-specific, you know, let’s say I wanted, you know, 50 pixels of padding maybe on desktop.

[00:20:23.000]
But then I wanted to say that on tablet and mobile, let’s say that I wanted to use a different set of units like let’s say I wanted percentages at that point.

[00:20:35.480]
Well, things are looking funky already. Let’s say I want two percent on either side. Well, if I then go back out to my desktop settings, you see now that units have changed, so you can within a Row block or within a column, for that matter, whatever units you set for, you know, one breakpoint, those are going to be used for all breakpoints. So if you need to do something like adjust your top and bottom margin or padding, you can do that in pixel units, you know, whether it’s your row or your column.

[00:21:16.460]
But if you put these back to their default, but if you need to start doing things left to right, especially when you start coming into mobile, I recommend doing that on your column, because if you were let’s say you for you know that you did have some kind of padding on your row. Well, if that’s in units of pixels, and let’s say this needs to be in pixels because you also are doing something in pixels top and bottom.

[00:21:46.500]

[00:21:48.810]
Let’s say there’s, you know, 60 top and bottom. So let’s say you’re doing something in pixels top and bottom, so automatically your units for left and right have to be pixels anyway, right? So if you need to make a change, do it on the column so you can then come in and say, hey, I want my units to be… Sorry. That’s border. Padding. If you want your units to be in percentages, which again I recommend that, let’s say you want three percent left and right.

[00:22:19.810]
Well, you can have those percentage units for your left and right padding and have those inherited down to your your mobile and sorry, your tablet and your mobile, which even though you don’t see values in here, it’s being inherited. So if there’s three percent in these boxes and the others are empty, as you go down the break points, three percent is still being applied. If you wanted specifically to have like five percent on either side on tablet, then you would need to enter that manually.

[00:22:50.980]
So then you have three percent desktop left and right, five percent left and right on tablet, and then that five percent is going to be inherited on your mobile. So, you know, mobile is not inheriting the desktop setting just as far as the, you know, whatever. The next highest up breakpoint is between desktop, tablet and phone, those settings are going to be inherited. Works the same with like your font sizes between breakpoints and everything.

[00:23:22.270]
OK, yeah. So when it comes to your left and right padding in a row, instead of applying it to the apply it to the column within the row. And if you’ve got I mean, I notice this specific, row, it’s just a it’s a two column row in part to go ahead and help you with some of the text stuff. But if this were, you know, a single column and you’ve got your text, you know, being funny, going all the way across, you’re like, oh, I don’t like how that looks.

[00:23:54.700]
Sure. You know, one way you can get started is to, you know, give yourself a 50 percent width on the row. But again, just to demonstrate how helpful some of what I’ve already covered is, let’s say that you did have just one row and instead of using, you know, two columns needlessly, because that could be, you know, that’s an extra div, an empty div that could be just adding to your DOM depth of, you know, this is this is, some of that some of those units weren’t changed.

[00:24:26.110]
So that’s now all stacked up funny.

[00:24:29.110]

[00:24:30.090]
So if we came back out to. All right, the column has percentages there, but then on. Desktop. What did I do? I don’t know. I broke something.

[00:24:45.540]

[00:24:47.940]
But I was going to… Let me hit that one more time. Some setting I just had somewhere has made that go funky. And I don’t remember what it was. Hang on, we’re troubleshooting on the fly. All right, the div itself. Max-width is set at zero pixels. That would do it. OK. Yeah, so let’s.

[00:25:18.170]
OK.

[00:25:19.590]
I forgot to move on the row itself on the structure settings. Max width, If I, you know, type something in here and then back it out, sometimes I have found that you might have to quickly toggle the inherit from your theme or something, because if you’ve entered some value here and then just do backspace, if it doesn’t automatically go back to, like, just default, you might have to just enter some value and delete it or something really quickly.

[00:25:52.030]
OK, so. Thank you for bearing with me while we do some on the fly troubleshooting, What the what?? It’s still here, OK, I don’t know, I shouldn’t have any caching because I’m in development mode. But that is still giving me Max with zero. OK. But whatever this is coming from, it’s all right, let’s say that I don’t actually need to max width I’m just going to give it like something that is definitely wider than what I need to see if that will remedy this, because I think it’s still assuming there’s a zero.

[00:26:37.730]
OK, so, all right. Now we’ve got one column. Our text is going all the way over here. And so instead of using, like two columns and having an empty div, an empty column with no text in it, we can use our fancy, little tool. So let’s say we need the break to be after yourself so we could just say line break. So br with your angled brackets come back to edit visually and boom, you have a line break at cheer yourself up with new print and come to desktop refresh.

[00:27:17.850]

[00:27:19.310]
And we could say, like, oh, yeah, that’s awesome. Love it, but if you’re just like I want, let’s say I want three lines of text and I want new print to be on its own line, then we would just come back to you to edit as HTML. There is still a non-breaking space in here. It doesn’t… I don’t think it’s got to be there for what we’re doing now. But we could put a line break, not b-e.

[00:27:48.840]
We are… Edit visually. Update. So I don’t know if if that was the look someone was after, just trying to get your your text breaking exactly how you want it, it might bother some people that the line “cheer yourself” is longer. Like, I wouldn’t let that ride on my own stuff, but…

[00:28:20.390]
That’s just to show you, you can manipulate how you’re breaking that text more, OK? I think this video has been sufficiently long. I will put a link to every tool that I mentioned and showed in this video. OK, I’ve got to remember to drop in. Hoverify Chrome extension, there [are] links to everything below. I am an affiliate for Kadence Theme and Blocks and so the affiliate link will be down there. So if you want to go through my link to check out these tools, if you don’t already have them, I’d appreciate it.

[00:28:57.290]
Otherwise. Just Google it. You can find it. Hope those little tips and tricks are helpful for you in trying to make your Kadence sites responsive. And, yeah, share this around if there’s anyone you think could benefit from it. Yeah, OK. Awkward ending. Bye.