Site logo

Archived topic

Widget Padding / Margins

7 replies · Started by Caleb Carroll on November 14, 2018

Viewing posts 1–8 of 8

Been trying to get this resolved for a few days, can't seem to find the right CSS to get the job done.

My padding & margins are off for content inside of the sidebar.

Currently it looks LIKE THIS

I'm trying to get it closer TO THIS (Quick Photoshop Edit)

Hi there,

did you get this resolved, i may be missing something but currently the site looks the same as your PS edit image. Let me know.

No,

In chrome, the social icons are set to be centered, but you'll notice there appears to be a 5 or 6 pixel 'pad' on the right side, keeping them off center, and no padding on the left side. No padding on the left side is confirmed in the third sidebar widget as the bulletin points are directly up against the border.

Does that clear things up at all?

OK, so this will fix the social icons:

.widget_lsi_widget .lsi-social-icons li {
    margin: 0 4px 8px 4px !important;
}

For the widget padding, do you intend to add anymore widgets? As we would need to target each widget container separately. ie. ones with padding and ones without.

I can hold off on adding them for now and if I were to add them it would be the simple ones. - Text, HTML, or Image.

Any reason why you don't just add widget padding in the Customizer? If there's a couple widgets that need no padding, you can target them specifically to remove it.

For now, you can add padding to that third widget like this:

#custom_html-3 {
    padding: 20px;
}

Widget padding effects the entire thing, meaning the yellow header is also effected, I want the yellow header to stay full width, but the content to be effected by padding.

That can be solved quite easily.

Let's say you add 40px of padding to the widgets, you can then do this:

.sidebar .widget-title {
    margin: -40px -40px 10px;
}
This archived topic is closed to new replies.