This Is a KILLER Blog Layout ![rw-book-cover](https://img.youtube.com/vi/0pKKGDDbbqY/maxresdefault.jpg) I had a viewer of the channel reach out to me to ask me how I would set up something like this blog post template where we see the text is nice and skinny here in the middle which makes it easy to read but all the images and videos kind of break out of that container and get a little bit wider. Now there are a lot of different ways you could accomplish this type of layout but in today's video I'm going to show you a pretty simple and straightforward approach that's actually automatically responsive. Now, in order to accomplish this in this demo, I'm actually going to do it all by writing a little bit of CSS. I think it's just easier to understand how everything's working when you can see all the code being written in one place. If we were to do this inside the editor, which is definitely possible, we would have to jump around to a lot of different panels, and it just makes it a little bit more confusing. But I think once you see how this is done, writing all the CSS, if you're more comfortable working in the editor, you could translate all this back and just put it right inside of generate blocks. But before we jump in and I show you how it's done, just a quick word from today's video sponsor and a huge thank you to Pyalar for sponsoring videos here on the channel. Have you ever wished for a simpler WordPress event plugin? Meet Py Calendar, the easiest way to turn any post into an event on your WordPress site. Just pick a post and set a date. Make it repeat if you want and then drop in the Pi calendar block. Beautiful events for WordPress right at your fingertips. If you're tired of the bloat, the headache, the expensive renewal fees, there is a better way. Pi Calendar, because sometimes simple is better. So, let me show you what I got set up so far. Here inside my demo site, I've gone ahead and just copied and pasted all of this content in from the blog post. We can see it looks pretty messy here in the backend editor, but if I go view this post on the front end, we can see we already have something that looks kind of close to that final blog post. Of course, everything right now is all the same width, and that's what we're going to be working on and fixing in this video. But let me show you how I got to this point. If we go in here to our elements, I have a blog single content template. This is what we use to set up our blog post templates. And in here, I just have two different sections. The first is my hero. It has the term and the title and the featured image. And then underneath that, we have our content. Now, inside both of these, we do have a wrapper that's just constraining our max width. Now, for these, I actually did go set the max width to be 900 pixels for both of them. Even the wide content in this example doesn't get wider than about 900 pixels. So, I've just gone ahead and fixed that to say nothing can get past 900 pixels. Although, our text content is going to be a little bit more narrow. Now, one other thing I did on here is just give this wrapper inside my content a class of blog content wrapper. We're going to use that to target so we can write some of our CSS. We'll go ahead and save those changes just in case I did anything. And again, I want to take a look at this on the front end and point out one thing. If we go in here and inspect this code, we of course have our section for all of our content here. That's just the full width section on this page. And then inside of that, we have that wrapper that I set up with a max width of 900 pixels. and we can see that blog content wrapper class inside of it. However, before we get to all the individual paragraphs and images inside our blog post, we can see there's a div that's wrapping that that has a class of dynamic entry content that comes from using the dynamic content block, which is how we bring all of our blog post content into this template. So, to add that into our blog post template, we just add this dynamic content block and then it places all of the content inside of it. But it's important to know that it's actually wrapping all that content in this div because we're going to be using some descendant selectors and we have to know that this div is inside of there. So I think all that will make sense as we go in here and start writing just a little bit of code, but I wanted to point that out ahead of time. So like I said, we're just going to write CSS for this because I think it's a little bit easier of a demonstration and you'll be able to see exactly what's happening. So since I created that blog content wrapper class, I'm going to go ahead and paste that in. That's just blog content wrapper. We can see if I just put an outline of one pixel solid on that, that's going to outline everything inside of our blog content here. Now, we're going to be using CSS grid in order to get this effect. But if I just did a display grid here on my blog content wrapper, and then let's just say I did a grid template columns F1 FR 1 FR. We can see that it moved all of our blog content into this first column here. And that's because we actually need to put this display of grid on that dynamic entry content, that div that wraps all of our content. So here next to our selector, I'm just going to do a space and I'm just going to do dynamic entry content. And now we can see that it's actually affecting all of the individual pieces inside my blog post. Right now I just have this set up to be a two column grid. Of course I could change this to three column or whatever we wanted. But now we can see that this is actually affecting that wrapper that's wrapping all of our content, which is exactly what we want. Now, we do want to set up a three column grid, but I don't want to do it just three even one frs. What we're going to do is we're going to do a 1 FR, which is going to be our column on the left. And then the middle, let's just do something like 70CH, which is a character unit. That's just going to make sure our text never goes past 70 characters wide. And then we'll do another 1 FR on the end. Now we can see we have a small column on the left, a small column on the right, and a bigger column in the middle. It is breaking our layout here and kind of overflowing because there's not enough room for this 70CH. If I change this down to something, I don't know, like 40 CH, it will all fit in here. But things look a little bit broken. What we want to do for this middle column is actually write a minax function. So to do that, we just write min max and open and close our parenthesis. We're going to do a 0 comma 70C ch. This way, this middle column can shrink down so we don't cause any overflow issues. Of course, we don't want each paragraph or image inside of our blog post to get inside of its own grid cell like this. Everything looks pretty messy. So, what we want to do is go ahead and add a semicolon to the end of that line. And now, we just want to target everything inside of this dynamic entry content. So, I'm going to use nesting here. And we're just going to use our universal selector. and open and close our curly brackets. Now, for this, we're going to do a grid column, and we're going to tell everything inside of our grid to start on column 2 and end on column 3. Now, if we just kind of ignore that featured image, and we just look at everything inside of that dynamic entry content, we can see everything's living in that middle column. Now, of course, we don't want our images and videos to live in there, but I just want to start out with everything living in the center. And then we can specify what things we want to break out. So I'll get outside of this universal selector here. And again, I'm going to use nesting. And this time we're just going to target all of our figure elements, which are all these images and videos. So to do that, I'll just type in figure and open and close my curly brackets. And then this time I'm going to write grid column. And we're going to do one over -1. Negative one is just a little trick to make sure it goes all the way to the end. And now we can see all of our images are starting on this first column on the left, even though it's kind of invisible up here, and they're spanning all the way across to the right and going past where our content is allowed to sit. Now, we can see we can control this pretty easily with that minmax function. If we decided 70 is too wide, we could bring that down to 60. And now all of our content in the middle is even skinnier, but our images weren't affected. They're still going to that full 900 pixels we set up. I think I'll just go ahead and split the difference here and we'll go with something like 65 CH which is nice and comfortable to read. The nice thing about using this minax function is everything's already automatically responsive. If I go down to our tablet breakpoint, we can see our text is still skinnier than our images and our videos. And if we go down to our mobile breakpoint, nothing overflows. And now that there's not really enough room for things to get a little bit wider, everything just fits in a nice solid column. So, the advantage of using this setup is everything's kind of automatically responsive for us. Now, we just lucked out in the fact that all of these images and videos use a figure tag. So, we could just tell figure tags to span all the way from the left all the way to the right. But, we do have one thing in here that doesn't quite fit that pattern, and it's this carousel inside of here. In the example blog post, they also had this carousel. If I scroll down and find it, you can see it's going to that wide width as well. So we need to build in some kind of control here where we can manually specify something get wider. So instead of just directly targeting this figure tag instead I'm going to use colon is and then open and close parenthesis. And now I can target multiple things in here. We'll go ahead and put our figure back in here. So now our figures are getting targeted. But if I want to target other elements, I'm able to do that inside of these parenthesis as well. Just to show you an example, this is an H2 right here. So, if I do a comma and then H2, we can see our H2 is now spanning that wide width. Now, this doesn't look good with our H2. So, we'll go ahead and get rid of that. But, this gives us the ability to put multiple things inside of here that we can tell to span that full wide width. So, let's go ahead and save those changes. We'll hop back into this blog post and scroll down until we find that carousel. Go ahead and pop open my list view here. And we can see my carousels inside of a container. So, let's just give this a class. Let's just call this wide blog. We'll go ahead and hit create. We'll start with the blank style and save that. All we did was just add a class to this wrapper around the carousel. We can go back into the customizer here and I need to refresh. We'll scroll down here to where we can see that carousel and inside those parentheses in my is statement, I'll do a comma and I'll do wide-en blog, which is the class we set up around that wrapper. And now you can see this carousel is actually spanning that wide width just like our images and figures here. This way we have the control right inside the editor to just add that wide blog class. And anything we want to span that wide width, we'll go ahead and do it. Just to show you that that's going to work anywhere. I'll just go ahead and pick this random bit of text here. We'll go into our classes and I'll just do wide blog as a class. We'll save those changes and preview this on the front end. We'll scroll down until we find that paragraph. This is the paragraph we added that class to. And we can see it's now spanning all the way from that left column to the right column over here on the end. So, this just gives us a control to be able to use this at any point if we want to break something else specific out. The nice thing about this setup is we kind of used a programmatic approach to target all these figures because we know we want all of our images and videos to always span. But then we set up an option here where we can just add a simple class to something to be able to get it to span as well. If there were other things we wanted to program in to span that wide width, like before the example of our H2s, we could just add a comma H2. And now every H2 inside this article is going to go ahead and span that wider width. So, it really just depends on what you're trying to set up here. But using this is function inside of here is a nice way to be able to target multiple elements. Like I said at the top of this video, you are able to do all of these things inside the generate blocks editor if you just don't want to write CSS. But with things like this where we'd have to jump into a lot of different panels and target things so specifically, I find a lot of times it's easier to just go ahead and write the CSS for it. Hopefully you learned something in today's video. If you did, I would really appreciate a thumbs up. And if you want to make sure to catch the next one, hit subscribe and we'll see you, This Is a KILLER Blog Layout, YouTube, 01kc4dd8491g6n915xyt3wjwg0.