Fixing the Sidebar Widget Positions & Fixing Code

Tagged: div, fixed position, height, sidebar, widgets

This topic has 6 replies, 2 voices, and was last updated 9 years, 10 months ago by Eric.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
July 22, 2013 at 1:37 pm #5976

Mike
Customer

Hi,

I was using a sidebar widget plugging to fix 3 widget sections.

But that led to ‘jumpy’ elements when activated. It’s deactivated now.

As on… http://mikemetcalfe.co/cinque-terre-italy-destination-travel-review/

… the bottom widget ‘simple social’ jumps above the div line

Any ideas why?

Also, does anyone know how to manually fix the sidebar elements without a plugin?

thks!

July 23, 2013 at 2:00 pm #5993

Mike
Customer

Hi all – the easy CSS option (but not ideal) seems to be removing the div and increasing padding between elements (?)

But it anyone knows why they simple social icons push up into the above section, I’m all ears. Strange.

July 24, 2013 at 2:05 pm #6004
Eric
Customer
It looks like you added some custom code to the sidebar widget area which is what caused the issue. You increased the width to 340px which seems to be the problem. If you notice the widgets are cutoff when it exceeds that area. Try decreasing the width to 330px or so and you’ll see it show up correctly –
```
.sidebar .widget {
    border-bottom: 1px solid #ccc;
    margin-bottom: 2rem;
    margin-right: 17px;
    overflow: hidden;
    padding-bottom: 2rem;
    width: 340px;
}
```
should be around line 2155

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
July 25, 2013 at 9:20 am #6024

Mike
Customer

Cheers Eric. Now on 330. The width changed but strangly SS-Icons still jumps above the border bottom line. Thanks for trying.

July 25, 2013 at 12:50 pm #6027

Eric
Customer

It’s still showing cutoff when the browser is resized. I’d just remove that width all together since there is already a width defined for the sidebar. Then your sidebar won’t look cutoff when viewed in smaller browser sizes.

Also, the border issue could be just an error in your code that you added to the widget area. I’d go through and double check that all your tags are opened and closed properly. For example, by looking at the source code I can see an extra closing </p> tag –
<center><img src="http://mikemetcalfe.co/wp-content/uploads/2013/07/mm-circle.png" align="middle" alt="Mike Metcalfe"</p>

…..but there is no opening <p> tag. When this happens it causes errors on other parts of the site. Not just WordPress, but any site using HTML.

So if you go back and fix any of those errors it will definitely work.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

July 25, 2013 at 4:00 pm #6030

Mike
Customer

Rockstar, that did the trick and learned something new. Thanks!

July 26, 2013 at 1:59 pm #6040

Eric
Customer

You’re Welcome!

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Fixing the Sidebar Widget Positions & Fixing Code’ is closed to new replies.