Skip to Main Content

How to fix a sidebar that appears on the content

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

While you're working on your WordPress site, you notice that suddenly your sidebar appears below your content where it shouldn't be. Worse yet, there is no obvious error message.

What happened ? Does your theme implode?

Before you get angry and tear your shirt like Hulk, or ransack your room in a flash, you can relax. And understand that this is actually a common mistake on WordPress and it can be easily corrected.

Today I'm going to show you how to quickly resolve your theme when you see your sidebar drifting below the content. No need to be a god.

Keep in mind this: If you are not able to fix this error after trying the suggestions below, our support team is available.

What are the causes of this error on the Sidebar?

You were happily editing your site, when all of a sudden you noticed your sidebar shifted to the left or right of your main content area below your content. Unfortunately, you don't have to do too much to make this happen.

Sidebar error below content

Fortunately, the reason your sidebar is in the wrong place on your page is a small error that is easily fixed and it may be due to one of the following:

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

  • There is an error in your HTML code:
  • There is a "div" tag that has not been closed in one of your theme files.
  • It could also have an additional opening tag or that you need to delete.
  • There is a mistake in your CSS:
  • In the style.css file of your theme, there is a height and a width defined for an item on your page that is disproportionate, which causes this setting.
  • Otherwise, the float property might not be used properly.
  • A plugin can interfere with your layout.
  • Content or customizations made for a previous theme might be incompatible with your new theme.

It's much less likely that a plugin is causing the problem, but it's worth keeping in mind that with more and more plugins creating pages intended for layouts, plugins can come into play. conflict with your theme if you choose to use a different page template.

If you changed your theme and your old one had content or features that were stored in your database as custom data but it was not deleted, it might cause problems as well.

Also less likely cause, but there are more and more themes that use plugins with shortcodes and other features that are usually not removed once you change themes.

Fixed the Sidebar error on WordPress

Before attempting any unimaginable way to solve the problem, there are a few steps that you must first follow.

First you need to take a quick-look and determine which parts of your site are affected by this error. Yes :

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

  • Only your pages are affected: you need to check "page.php" or other page files.
  • The flaws on all the articles of your blog: check your single.php file
  • Only the pages of an automatically created plugin are affected: there is a problem with this plugin or the theme you used that has an incompatibility with the plugin.
  • If all pages are affected when you have added custom HTML or CSS code: you must check your customizations
  • If you've made any changes to your theme: restore your entire site, remove the changes, and then create a child theme where you can include your customizations.

Once you know which exact file is affected, you can start correcting it. If your pages or blog posts are those that display the sidebar below the content, you must edit them. This also applies to all pages where you have recently added custom HTML or CSS.

Open it using an FTP client, SSH or directly in cPanel by clicking on the "Edit" button in File Manager. Then find the errors, close or remove the offending tags, or correct your CSS. Save the file and send it to your hosting, replacing the file with the error.

If a plugin or theme is affected, contact its developer and specify the error so that they can include a fix in their next update or provide you with a workaround.

If you used a plugin or theme to make HTML or CSS customizations, go back to where you added the changes, find where the error is, and then save your changes once you've fixed them.

Troubleshooting tools to discover errors

There are also free online tools that you can use to automatically scan your code to check for errors.

You can try any of the following tools to validate your code:

HTML:

CSS:

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Once the error has been understood caught, you will be able to correct it with the steps outlined above. You can also find more information about code validation in the WordPress Codex.

That's all for this tutorial, feel free to share it with your but on your favorite social networks.

 

This article features 0 comments

Leave a comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
9 shares
Share6
tweet1
Save2