Footer Widget Spacing

• 

  stephendove8 · Member · Dec 27, 2015 at 3:04 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I want my footer widget links like Contact, About ect to be spread out a tiny bit with some CSS code. This is partly for SEO reasons for mobile tap targets when mobile users tap their phones and the links are too close together. Any help would be appreciated.

  Thank you

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

• 

  starxedsteph · Member · Dec 27, 2015 at 4:56 pm

  • Copy link

  Hi there,

  You could try something like this to add space around those menu items. Just adjust the number up or down to get the exact amount of spacing you prefer.

  #footer-widgets .widget li.menu-item {
      padding: 10px;
  }

• 

  stephendove8 · Member · Dec 27, 2015 at 5:13 pm

  • Copy link

  Thanks that worked great, could you tell me how to how to space out the (Blog at wordpress.com The dynamic news theme) links as well at the footer of the page?

  Thanks

• 

  starxedsteph · Member · Dec 27, 2015 at 6:03 pm

  • Copy link

  For that one, you may want to space them only horizontally. I would do something like this:

  #credit-link a {
      padding-left: 10px;
  }

• 

  stephendove8 · Member · Dec 27, 2015 at 6:33 pm

  • Copy link

  Thanks that worked perfectly too, one more if you have the time is right at the top my Google Plus social icon is too close to my search bar which is far too close for tap targets on mobile devices so is there anyway i can move the search bar over to the left slightly?

  Thanks again i really appreciate the help.

• 

  starxedsteph · Member · Dec 28, 2015 at 1:13 pm

  • Copy link

  Sure thing!

  The spacing of the social icons and search bar on tablets looks good to me. A great way to test this is by using Google Chrome’s inspector and choosing Device Mode. That will allow you to test out a variety of devices and changes your cursor to a larger circle intended to mimic what someone could click using a finger.

  If you do still want to space those two items horizontally you can do so with this code:

  div#header-social-icons {
      padding-left: 10px;
  }

  I also tried running it through Google PageSpeed Insights to see what message you were getting there. It does list this area but is referring to vertical spacing between the search bar and social media buttons on phones. If you want to correct that, use this code instead:

  @media screen and (max-width: 480px) {
  #social-icons-menu {
      margin-bottom: 10px;
  }
  }

• 

  stephendove8 · Member · Dec 28, 2015 at 2:04 pm

  • Copy link

  Thanks in regards to the credit links, it changes their positioning the code you gave in on desktop but i needed it also for mobile phones as well.

• 

  starxedsteph · Member · Dec 29, 2015 at 1:24 pm

  • Copy link

  This will give you the vertical spacing between those credit link lines. I also moved it to the left so it would align under your copyright line and then only added spacing to the left of the second link.

  Notice the max-width screen size is 768px and the previous code I gave you for phone specific CSS was 480px. This seemed like something that would be good to do on both tablets and phones so I bumped it up.

  @media screen and (max-width: 768px) {
  #footer #credit-link {
      line-height: 2;
      float: left;
  }
  #credit-link > a:nth-child(2) {
      margin-left: 10px;
  }
  }

• 

  stephendove8 · Member · Dec 29, 2015 at 1:52 pm

  • Copy link

  Thank you so much for the help Steph ;)

• 

  starxedsteph · Member · Dec 30, 2015 at 12:05 am

  • Copy link

  You’re welcome!