Correct inconsistent padding in sidebar widgets

Activello
1

Hi guys!

There seems to be some inconsistencies in the padding (top and bottom) of items in my sidebar. This looks especially unsightly since they are wrapped by a border which also makes the gap very obvious. I’ve noticed this with widgets like Tags, Archives, Social menu, Instagram, Adsense etc. I’ve tried individually correcting Archives and Social Menu widgets but it’s become a recurring issue with multiple widgets. Please help.

How do I get uniform 15px padding on all sides?

My site: http://www.lipstickalchemist.com/

2

Hi @lipstickalchemist,

I hope you are well today and thank you for your question.

I can see the padding is 15px on all sides of widgets on your site shared site.

It seems inconsistent on some widgets because of HTML tags added in widget as shown in the attached screenshot.

Best Regards,
Movin

3

Oh! Is there a way I can edit or remove it?

4

Yes you have to remove it by editing the text widget created for Instagram widget.

5

There isn’t any additional text as shown in the screenshot. Also, this is a recent issue, last few months only. Before that it was fine! Same thing with adsense, just my specific code. Other than that, the tags and archives are theme defaults and even they have extra gaps.

6

It is not a theme issue but the widget code issue.

In your shared screenshot you are just displaying the shortcode you have added in widget but have you checked the output generated by that shortcode?

You can try resolving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS


#text-4 .textwidget > p,
#text-6 p > br,
#text-10 p > br {
    display: none;
}
7

This is exctly what I was looking for! Thank you so much :slight_smile:

It has fixed the Instagram and adsense widgets, but there are still gaps around archives and tags widgets. Please help!

8

I don’t see those widgets on your shared site.

Please advise.

9

Sorry about that! They are only visible on category pages, for example Fashion.

10

To fix it on archives and tags widgets, please use the below custom CSS code.

.widget_tag_cloud .tagcloud {
    margin-top: 0;
}

.widget #archives-dropdown-2 {
    margin-bottom: 0;
}
11

Thank you! :slight_smile:

12

You are most welcome here :slight_smile: