13 {{ upvoteCount | shortNum }}
13 {{ upvoteCount | shortNum }}

CSS Code to Increase Footer Height

by Christophe Young
9 replies
  • WEB DESIGN
    • |
I'm currently using Profits Theme for Wordpress and I'm trying to increase the footer (BG Image) height on one of the skins in the custom editor. Does anyone know what CSS code would have to be added to accomplish this?

Here is the existing CSS code in the editor:

/* Footer */
#footer-bg{

}

#footer{

}

#footer a{

}

#footer a:hover{

}

.footinfo{

}
#code #css #footer #height #increase
  • Profile picture of the author wedhooz
    assuming its 100px height
    #footer-bg {height:100px;}
    {{ DiscussionBoard.errors[4247535].message }}
    • Profile picture of the author Christophe Young
      Originally Posted by wedhooz View Post

      assuming its 100px height
      I tried adding that code, then saved the settings and it didn't work. Any other suggestions?
      Signature
      Under Construction
      {{ DiscussionBoard.errors[4247690].message }}
  • Profile picture of the author wcardinal
    here you go....

    Add padding. The code below adds 20px to the top and bottom....

    PHP Code:

    #footer-bg {   
          background: #212121;    
          padding:  20px 0;
    } 
    Signature

    {{ DiscussionBoard.errors[4247785].message }}
  • Profile picture of the author Christophe Young
    Hm, still isn't making any changes to my footer.
    Signature
    Under Construction
    {{ DiscussionBoard.errors[4247934].message }}
  • Profile picture of the author wedhooz
    which css that you edit? i reckon they have multiple css.

    do you have live url?
    {{ DiscussionBoard.errors[4248022].message }}
    • Profile picture of the author wcardinal
      you are going to have to post a link. It had to have made a change if your site.
      Signature

      {{ DiscussionBoard.errors[4248423].message }}
      • Profile picture of the author socialanthem
        Umm typically CSS is nested through a class so it depends on what your trying to accomplish
        this is a good place to start if you are trying to learn how to resize as there is no specific fix all as style sheets contain classes

        For Example
        Code:
        <style type="text/css">
img.normal << this is the class name for the Image
{
height:auto;
}
img.big
{
height:220px;<< when you change this it changes an image size
}
p.ex
{
height:100px;<< when you change this it changes the paragraph size
width:100px;
}

<img class="normal" src="logocss.gif" width="95" height="84" /><br />
<img class="big" src="logocss.gif" width="95" height="84" />
<p class="ex">The height and width of this paragraph is 100px.</p>
<p>This is some text in a paragraph. This is some text in a paragraph.
This is some text in a paragraph. This is some text in a paragraph.
This is some text in a paragraph. This is some text in a paragraph.</p>
</body>
</html>
        As far as the padding post, thats correct! However, it really is dependent on the class being changed.. Perhaps you dont have the right class that you are changing.
        {{ DiscussionBoard.errors[4253315].message }}
        • Profile picture of the author Karen Blundell
          what is the existing height on the footer?


          let's assume the existing height is 60px and you want to increase it to 100px
          use this

          #footer {
          height: 100px;

          }

          sometimes you may need to add this to the mix to make it work:

          #footer {
          height: 100px!important;
          }

          if this fails, then like others have mentioned, we will need to see your site to delve deeper into the code to see why your footer height is not changing with our suggestions. Or if you prefer to keep the details private, please send me a pm with the URL and I can take a look for you.
          Signature
          ---------------
          {{ DiscussionBoard.errors[4254823].message }}
  • Profile picture of the author Christophe Young
    Thanks for all your comments, I was able to get it figured out.
    Signature
    Under Construction
    {{ DiscussionBoard.errors[4257649].message }}

Trending Topics