Widget Margin Issue On Education Theme

[fredyyvParticipant Post count: 2]

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/

[anitacModerator Post count: 3058]

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 customization services or other help? Visit me here: Cre8tiveDiva.com | Twitter: @thecre8tivediva
Why Not Take The Challenge! – Help us answer some of the unanswered posts

[fredyyvParticipant Post count: 2]

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.

[HolliParticipant]

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.

 

[emzoParticipant Post count: 5]

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;
}

• This reply was modified 6 months, 1 week ago by  emzo. Reason: Added image of text widget

• This reply was modified 6 months, 1 week ago by  emzo. Reason: Added image of text widget

[emzoParticipant Post count: 5]

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 }

[emzoParticipant Post count: 5]

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.

[fredyyvParticipant Post count: 2]

that fixed it. thanks. you guys are awesome.

[Author]

Posts