Widget Margin Issue On Education Theme

[fredyyv]

I need to know how to modify my css files to make my sidebar widget all have equal margins on each side. details below. thanks.

Image of sidebar margin issue:
http://screencast.com/t/lxqzDiWml

Website where sidebar is location:
http://localorganicranking.com/occ/

[AnitaC]

That's under your .sidebar in CSS. If you only want to change the left and right - I put this and change the number to whatever you want it to be.

margin-left: 15px

margin-right 15px

Someone else may have a better way to do it.

---

Need help with customization or troubleshooting? Reach out to me.

[fredyyv]

I'm sorry, I meant to say that I wanted the bottom to match the width of the left, top and right right edges. The bottom of the image has a greater width than all the other sides. I want to make all sides equal but not sure with css code to modify.

[Holli]

You've got a class applied to the image in the sidebar of alignnone which has a margin of 25px on the bottom. You can add this line of code at the bottom of your CSS to target JUST that image in the sidebar:

#sidebar-alt img.alignnone {
margin: 0;
}

I tested it in firebug, and that fixed it.

 

[emzo]

I suspect you may have the "Automatically add paragraphs" checkbox selected for these sidebar widgets. Go to your admin and take a look at the text widgets in this sidebar and see if that's the case.

On line 1418 in your style.css file, you'll see a rule for styling <p> tags within the sidebar, which adds a 15px bottom margin.

.sidebar p {
    font-size: inherit;
    text-shadow: #fff 1px 1px;
    margin-bottom: 15px;
}

[emzo]

If this is not the case, you can add a CSS rule to override the bottom margin of the <p> tag within this particular sidebar. Add the following line towards the end of your style.css

.widget_black_studio_tinymce p { margin-bottom: 0 }

[emzo]

Sorry, just realised you're using the Black Studio TinyMCE Widget. You'll probably want to use this CSS instead:

.widget_black_studio_tinymce p:last-child { margin-bottom: 0 }

This will allow you to have multiple paragraphs in your widgets should you need to, and only removes the bottom margin from the very last paragraph in each TinyMCE Widget.

[fredyyv]

that fixed it. thanks. you guys are awesome.

[Author]

Posts