Social Icons in the Footer

• 

  grassoart · Member · Sep 28, 2016 at 2:56 pm

  • Copy link
  • Add topic to favorites

  Hi, How can I move to the center the social icons in the footer, make them bigger and change their colors?
  And How can I add a customized credit above the “wordpress.com”?

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Sep 28, 2016 at 8:36 pm

  • Copy link

  Hi there, add the following to the bottom of your custom CSS. The third rule will allow you to adjust the size and the colors of the icons and the round border.

• 

  thesacredpath · Member · Sep 28, 2016 at 8:37 pm

  • Copy link

  Oops, forgot to include the code. :)

  .jetpack-social-navigation, .site-info {
      margin-left: auto;
      margin-right: auto;
      width: 100%;
      text-align: center;
  }
  .jetpack-social-navigation ul {
      display: inline-block;
  }
  .site .jetpack-social-navigation a {
      color: #cc0000;
      border-color: #cc0000;
      font-size: 1.5rem;
      margin-top: 10px;
  }

• 

  grassoart · Member · Sep 29, 2016 at 4:31 pm

  • Copy link

  It worked thanks! In the desktop mode the “wordpress.com” goes over the social icons, is there a way to make it stay under them?

• 

  thesacredpath · Member · Sep 29, 2016 at 7:56 pm

  • Copy link

  That’s weird. I’m not seeing that on Chrome, Safari or Firefox. Which browser are you seeing this issue in, and are you still seeing it?

• 

  grassoart · Member · Sep 30, 2016 at 5:25 am

  • Copy link

  I’m seeing it both with safari and firefox. When you enlarge the screen the social icons goes under the wordpress.com and my copyright.

• 

  thesacredpath · Member · Sep 30, 2016 at 6:20 pm

  • Copy link

  Ah now I see what you are talking about, the order of the footer elements. I mistakenly thought it was overlapping or something like that.

  They have used a Media Query to reorder the elements of the footer area for screens 896px and wider. Add the following to your custom CSS which will reverse that and keep the social icons above the text.

  @media screen and (min-width: 896px) {
  	.site-info {
  		order: 2;
  		-webkit-order: 2;
  		-ms-flex-order: 2;
  	}
  }

• 

  grassoart · Member · Sep 30, 2016 at 6:31 pm

  • Copy link

  Perfect! Thank you so much

• 

  thesacredpath · Member · Oct 1, 2016 at 9:15 am

  • Copy link

  You are welcome.