help spotting simple CSS problem

  • jpt145

    (@jpt145)


    8 years, 2 months ago

    Hi guys,

    I have a simple tabbed social media box on my website where the tabs are mis-aligned and cant figure out why… Im certain its a simple CSS edit:

    http://www.Jillysoc.com

    If you scroll down the homepage to the footer, there is a Social Media Feeds Box under “Jilly’s Social Media” for Facebook Tab, Twitter Tab and Instagram Tab. Clearly the Tabs are mis-aligned. The tabs are written in an unordered list structure… the first one is staggered higher than the other two…

    I could use some help.

    Thanks in advance

    JT

Viewing 3 replies - 1 through 3 (of 3 total)
  • stephencottontail

    (@stephencottontail)

    8 years, 2 months ago

    Your theme has some crazy-specific CSS that takes the top padding off the first tab. You could override it in your child theme:

    #footer-outer #footer-widgets .col ul li:first-child {
	padding-top: 8px !important;
}

#footer-outer #footer-widgets .col ul li > a:first-child {
	padding-top: 8px !important;
}
    Thread Starter jpt145

    (@jpt145)

    8 years, 2 months ago

    Yes! I noticed that in google inspector…. there was a ‘first-child’

    I didnt design this WP site. The original developer disabled the themes built in footer WP GUI… and wrote his own child footer.php and left me no comments. So when my client asked me to modify the footer elements the entire thing broke and I was left studying someone else’s code line by line. After a while, I gave up because the client wants the footer done by WP Widgets so he can change the elements himself on the fly… but he loved that tab social media feed and I could not find, after extensive searching, a good tabbed social media feed that would integrate as a widget.

    Thanks, It works !!!

    Thanks a Million Steve!

    Thread Starter jpt145

    (@jpt145)

    8 years, 2 months ago

    Last question….

    In order to modify the entire social media feeds box to be the same HEIGHT as the other footer widget boxes, which element’s CSS do I modify?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘help spotting simple CSS problem’ is closed to new replies.