Footer format

• 

  taomoves · Member · Jun 22, 2015 at 7:27 am

  • Copy link
  • Add topic to favorites

  Hello,

  currently I feel that the footer takes too much space and its height could definitely be quite a bit reduced. I think the height could most likely be reduced by 40%.

  I tried to do that, so that the distance between “Impressum”, the social links and the WordPress credits is smaller, but I did not succeed.

  Can anyone help me with the code? Thanks in advance!!
  Ansgar

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

• 

  staff-jeanpierreac · Staff · Jun 22, 2015 at 7:59 am

  • Copy link

  Hi there!

  Your footer is right now the addition of three layers. First one, where you have “Impressum Datenschutzerklärung”, is 53px height. Then you have a 93px height widget layers in which you have your social icons. And finally you have a row with three layers (the copyright, the scroll to top arrow and Bloggen auf WordPress…). This line height is 34px as this is the height of the biggest one of this three layers (The last one).

  What could we do to reduce footer?

  1.- Let’s start by the end. Last tree layers are defined to get about 1/3 of the width each. If we give a little bit more space to the ‘Powered line’ message and we put the message in one line, we will save several pixels.

  First 2 statements gives 4% more width to .powered layer and 4% less to scroll to top arrow area. And then, the third one, forces “Bloggen auf WordPress.com. The Responsive Theme.” to be written in one line.

  div .powered{
  width: 35%;
  }
  
  div.scroll-top {
  width: 27%;
  }
  
  .powered .sep {
  clear: none;
  display: inline;
  }

  2.- Your social icons are using much more space than they need. this is because they have three 20px vertical padding and margins that you could remove. How?

  .widget_wpcom_social_media_icons_widget{
  padding-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  }

  3.- Finally you can get 16px more from the first line (Impressum Datenschutzerklärung).

  #menu-footer-menu{
      margin-bottom: 0;
  }

  You can customize all those margins to adapt to your needs (using for instance 3px instead of 0 in margins/padding if you want to reduce your footer a little bit less).

  I hope this helps. Of course feel free to ask us again if you need further help. We will be glad. :)

• 

  taomoves · Member · Jun 22, 2015 at 8:37 am

  • Copy link

  Perfect!!! You are great!!!

  Thanks a lot again!!!
  Ansgar

• 

  staff-jeanpierreac · Staff · Jun 22, 2015 at 10:44 am

  • Copy link

  :)

  Enjoy blogging!