WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Custom CSS? How to tweak header image position? (4 posts)

  1. mugget
    Member
    Posted 2 years ago #

    Hi All,

    I've just updated one of the header images on our site (to include a 2nd phone number), but the new image is a bit larger than the previous. I updated the custom.css file with the new image size, but now I just want to tweak the alignment as it extends a bit past the right hand side of the body. The left hand side of the original image was in the same place as the left hand side of the new image, so I am thinking it will involve a tweak around that point? But I'm just not sure how to track it down and implement it.

    The site is http://www.bookkeeping-brisbane.net.au/
    It's the phone numbers image at the very top right hand corner of the site.

    Thanks for any tips and guidance.

    Cheers,

    Conrad

  2. ragzor
    Member
    Posted 2 years ago #

    hello,

    in your css file replace

    #header {
        height: 140px;
        margin: 0 auto;
        padding: 10;
        width: 1100px;
    }

    with this

    #header {
        height: 140px;
        margin: 0 auto;
        padding: 10;
        position: relative;
        width: 1100px;
    }

    and replace

    #header .phone {
        border: medium none;
        display: block;
        float: right;
        height: 51px;
        margin: 30px 20px 0 0;
        padding: 0;
        position: absolute;
        right: 50px;
        text-align: center;
        width: 306px;

    with this

    #header .phone {
        display: block;
        margin: 30px 20px 0 0;
        position: absolute;
        right: 50px;
  3. mugget
    Member
    Posted 2 years ago #

    Excellent - thanks very much ragzor, that did the trick.

    To make it easy I tried not to edit style.css, I just added those bits of code you suggested to the custom.css:

    #header {
        height: 140px;
        margin: 0 auto;
        padding: 10;
        position: relative;
        width: 1100px;
    }
    
    #header .phone {
        display: block;
        margin: 30px 20px 0 0;
        position: absolute;
        right: 50px;}

    I knew it should be something simple, thanks again.

    Cheers,

    Conrad

  4. ragzor
    Member
    Posted 2 years ago #

    awesome :D

Topic Closed

This topic has been closed to new replies.

About this Topic