Sidebar horizontal line without padding or margin – Balance

[mariafernandez]

I'm trying to get the horizontal lines in my sidebar (http://www.spanish-bites.com/) to cover the whole sidebar width. So far I've failed with the changes I've made to my .css

Can anyone suggest how this is achieved? I've seen it done on other blogs.

Maria

 

[AnitaC]

I see a lot of lines and bars. Can you be more specific in the location possibly describing the text that is near what you want changed?

---

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

[mariafernandez]

On my blog's sidebar there's technically only one horizontal line, which gets repeated after each section. The social media icons, for instance, have a line above and below them.

I'd like that bar to reach the edges of the white area, but I haven't found a way of doing it.

Blog: http://www.spanish-bites.com

Maria

 

[AnitaC]

Oh, I don't believe you can do that. The CSS is adjusting to the width of the sidebar. There's no way to get it go stretch outside of that area like that.

---

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

[mariafernandez]

Outside? That would look ugly. What I want is what this other blog has done: http://www.janscarbrough.com/biography/

(See sidebar lines reaching the edges, rather than covering only the same area as the text because of the padding)

[AnitaC]

Are you referring to the the "sidebar" as in right sidebar where your search box is located?

---

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

[AnitaC]

I see now, because you have a white background I couldn't see it. I used Firebug and see that it's the left and right Margins, not the padding. So remove your left and right margins and it will fix it.

**NEW NOTE** her Margins are set at 0.

---

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

[mariafernandez]

On my .css I've tried changing to zero just about every margin and padding I can see. Nothing seems to work. The text moves to the edges every time. Perhaps you can give me a clue as to which margin you're referring to?

Thanks.

[mariafernandez]

OK. I've now figured it out. In case there's someone else with the same problem, here's the solution:

The original .css was:

.sidebar .widget {
border-bottom: 1px solid #ddd;
margin: 0 0 30px;
padding: 0 0 30px;
}

Now I have:

.sidebar .widget {
border-bottom: 1px solid #ddd;
margin: 0 0 10px;
padding: 20px 20px 20px;
}

[Author]

Posts