How To Make A Single Post Full Width

If you want to change your blog archive and post layout to full width you can do that in the customizer.

Appearance > Customize > Layout > Blog Layout > Full Content – No Sidebar

However, if you want to make just the blog post full width, and keep the sidebar for the Arcive you can add this code to Additional CSS.

.single-post #sidebar {display:none}
.single-post .col-8 {width: 96.57%;}

If you want full width on a specific post only, you can use the POST ID to do that…  Just copy the ID number from the editor and replace 1967 with your ID#.

.postid-1967 #sidebar {display:none}
.postid-1967 .col-8 {width: 96.57%;}


If you use this format it doesn’t play well with Featured Images.  They will not resize to fill the whole column space because the resizer is hard coded as a function.

You have a couple of options.

1. You can use the “hide featured image” option on those posts if this presents an issue.
2. If you’re only doing this on a few posts, you can use the Top Banner widget with visibility to create the image

If you really need full width images on every post you’ll need a child theme to fix.

Ask me if you need help as I haven’t need to create this code yet.

Previous Post

Hosting Google Fonts Locally for GDPR Compliance

Next Post

How to change the header search background color

Leave a Reply

Your email address will not be published. Required fields are marked *