On a computer the sidebar should sit beside the post, and suddenly it is at the very bottom of the page, under the comments or the footer of the article. Nothing in the theme was changed. In most cases one piece of content broke the layout: a stray </div> tag pasted in with a menu, a table or an ad, or something wider than the column such as a big table, image or video. The first question finds it fast: does it happen on every page, or only some? Below is a rebuilt example (not a real client), how to find the cause, and the fix for each.
| Cause | How to spot it | What to do |
|---|---|---|
A stray or missing </div> in a post | Only that post (and the blog page while it is listed) is broken. Paste the page address into the free W3C checker at validator.w3.org/nu: it reports "Stray end tag div" or "Unclosed element div" with the line | Open the post, switch to the code view (block editor: the three dots, then Code editor; classic editor: the Text tab) and remove the extra </div> or add the missing one. It usually came in with something pasted from another site, a menu or price table, or an old page builder |
| Something wider than the column | A wide table, an image with a fixed width, a video or map embed with width="800", or a very long link with no spaces. The page often also scrolls sideways a little | Set the embed's width to 100%; resize the image in the editor instead of typing a width; turn on the table block's "Fixed width table cells" or split a huge table. A one-line rule in Appearance > Customize > Additional CSS covers most cases: .entry-content img, .entry-content iframe { max-width:100%; height:auto; } |
| Code added to the header or footer | Every page broke at the same time someone added a tracking, chat or ad snippet ("Insert Headers and Footers", WPCode, the theme's "header scripts" box) | Remove the newest snippet and reload. Snippets should be only <script> lines; an extra <div> in one breaks every page |
| Custom CSS changed widths | Every page broke after an edit to Additional CSS or a child theme, often a width or padding on the content or sidebar | Copy the Additional CSS somewhere safe, delete the newest rules and reload. Widths that add up to more than 100% once padding is added are the usual culprit |
| A speed plugin combining CSS | Every page broke right after turning on "Combine CSS", "Optimize CSS delivery" or "Remove unused CSS" (WP Rocket, Autoptimize, LiteSpeed Cache, SiteGround Optimizer) | Turn that one setting off and clear the cache; if the layout comes back, exclude the theme's main stylesheet from it. More in the changes-not-showing guide |
| A theme or plugin update | Every page broke right after updates, with no edit by you | Check the theme's changelog or support forum for a layout bug; roll that one update back on a staging copy, or ask the developer. Do not edit the theme's own files: an update would wipe the fix |
If the W3C checker reports no stray tags, something is too wide. In Chrome, open the broken post, right-click, choose Inspect, then the Console tab, paste this line and press Enter. It lists every element wider than the post's column, and hovering one in the list highlights it on the page:
var c=document.querySelector('.entry-content, article, main');[...c.querySelectorAll('*')].filter(e=>e.getBoundingClientRect().width>c.clientWidth+1).forEach(e=>console.log(e))
For most sites this is one stray tag in one post, a few minutes' work once you know which post. If you would rather hand it over, or it happens on every page, that is what the box below is for. Related: an older site that shrinks on phones, a plugin conflict, and changes not showing.