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%;}

IMPORTANT TO NOTE

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 *