How to Fix the Sidebar in WordPress

This is problem relatives CSS.  It is difficult for someone to find the solution when not to know code CSS.

We have had so many question about this topic so we decide to write this guide for everyone

1. Reason of this error

Before we fix this error, we should find the reason, this help us solve the problem faster and exactly. The simple reason comes from CSS code

2. How to fix the sidebar drop below the content

The space of an element not enough position so it is dropped below.

First, please disable plugins that you consider they effect code of your theme.

Then, you check <div> in HTML effect side bar (Example: You miss div element isn’t closed: </div>)

you make sure enough width of side bar to display in a row with other element.

Example: if container of the theme has 1200 px,content is 900 px, margin-left:30px. Now, you want to side-bar in this container, Of course, you need put the width of side=bar is 270px or less than 270px

 

Screenshot_1

For other reason, it can come from float. You must make sure float left, float right for each element right

You can view sidebar of a blog page is dropped below:

Screenshot_4

After, fix with code float: left;

It looks like:

Screenshot_3

That’s all, hopefully this article helped you know how to add custom styles to WordPress widgets, play around with the CSS and experiment. If you have any further questions for us, don’t hesitate to put it up in the comments.
See you again in orther tutorials!

 

 

Leave a Reply

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