Simple Social Icons plugin CSS – sizing width issue

  • Resolved shiumai

    (@audreyshiu)


    7 years, 11 months ago

    Hi!

    I am using the Simple Social Icons plugin for my primary sidebar. Tried looking for the CSS code to edit the width so that the entire widget, including title and title background are equal width to my other widgets (like the ‘About’ widget above). My site is http://www.shiumaieats.com

    Using the Kindred child theme from Genesis: https://stnsvn.com/product/kindred/
    Please help me!

    Thank you!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Ciprian

    (@butterflymedia)

    7 years, 11 months ago

    If you are using Google Chrome, you can right click on the icon, select Inspect and check the CSS declaration (bottom right) and the location (file and line number).

    Firefox has a similar function.

    Thread Starter shiumai

    (@audreyshiu)

    7 years, 11 months ago

    Hi Ciprian,

    Thank you for the above. I managed to change the sizing and width of the icons, but not the width of the “Follow Me” box.
    I did the inspect for the title and I found the same line of code that affects the “About” widget above, but I can’t get the “Follow Me” title to be the same width…
    I’m fairly new to this so I appreciate your patience with my fairly simple questions…

    .sidebar .widget h4.widget-title {
	margin-bottom: 20px; background: #ffffb3; padding: 10px;
  font-size: 12px;
  font-family: Lato; color: #444
}
    Ciprian

    (@butterflymedia)

    7 years, 11 months ago

    You can try to add:

    width: 100px !important;

    to your element. Note that !important is not recommended in many cases. Try without it first and see if it works.

    Thread Starter shiumai

    (@audreyshiu)

    7 years, 11 months ago

    Thanks for your suggestion. Unfortunately that caused some titles to become vertical and pushed them to the left margin.

    I experimented with margin-left and margin-right in the same class as above. It affected both titles but “Follow Me” still remains smaller in width.

    Is it possible that the plugin’s code for the widget title is overriding my sidebar widget settings in Custom CSS?

    Ciprian

    (@butterflymedia)

    7 years, 11 months ago

    It is possible, yes.

    That’s why you need to use !important in your Custom CSS. It’s not best practice, but it might solve your problem.

    Thread Starter shiumai

    (@audreyshiu)

    7 years, 11 months ago

    Now all my sidebar widget titles except for the “About” are the same width… Yet again, the above code affects all of the widgets.

    I understand the function of !important but I’m trying to figure out where/which code to apply it to.

    Thanks again for your help.

    Thread Starter shiumai

    (@audreyshiu)

    7 years, 10 months ago

    Ciprian,

    It took me a while to figure it out but after taking a step back I got it to work. I placed !important after padding and margin and it worked perfectly. Now all the social icons are on one line.

    Thank you so much for your help!

    Ciprian

    (@butterflymedia)

    7 years, 10 months ago

    I’m glad you fixed it. CSS can be tricky sometimes.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Simple Social Icons plugin CSS – sizing width issue’ is closed to new replies.