AgentPress 2.0: How to stretch header & footer to the full width of the screen?

Community Forums Forums Design Tips and Tricks AgentPress 2.0: How to stretch header & footer to the full width of the screen?

This topic is: resolved

This topic contains 5 replies, has 2 voices, and was last updated by  FireSamurai 1 year, 8 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #12893

    updatealan
    Participant
    Post count: 47

    How do I make my AgentPress 2.0 header and footer stretch to the full width of the screen?

    #12915

    FireSamurai
    Participant
    Post count: 42

    UpdateAlan,

    You’ll want to remove the width property from both #header and #footer in style.css. However, this will make them so the content bumps right up against the left and right edges of the monitor, so I would recommend adding in some padding:

    [css]
    #header {
    color: #fff;
    margin: 0 auto;
    min-height: 125px;
    padding: 0 20px;
    text-shadow: 1px 1px #000000;
    }

    #footer {
    color: #ccc;
    font-size: 12px;
    margin: 0 auto;
    overflow: hidden;
    padding: 20px;
    text-transform: uppercase;
    }
    [/css]

    Hope that helps.


    My Websites: TheCookingDish.com | ChrisMower.com
    Connect with me: Facebook | Pinterest | Twitter | Google +

    #12957

    updatealan
    Participant
    Post count: 47

    Very helpful, thanks!

    #13226

    updatealan
    Participant
    Post count: 47

    http://www.dtconfidential.com/contact

    Hey again,

    I’m having trouble changing the color of the footer.  I’ve tried everything I can think of, and I’m having no luck. Can you help?

    Thank you!

    #13227

    updatealan
    Participant
    Post count: 47

    I figured it out.  Needed to add “background-” before “color.”  It, now, reads like this:

    #footer {
    background-color: #333;
    font-family: ‘Droid Serif’, arial, serif;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 20px;
    height: 200px;
    text-transform: uppercase;
    }

    Thanks, and sorry about the multiple posts on my other topic.  I appreciate your patience as I find my footing with WordPress.

    Best,
    Alan

    #13299

    FireSamurai
    Participant
    Post count: 42

    Alan,

    Instead of changing color to background-color you should just add background-color as a new property. Color is the color of the text while background-color is, well… the background color. By changing color to background-color you’re removing the text color property for the footer id selector.


    My Websites: TheCookingDish.com | ChrisMower.com
    Connect with me: Facebook | Pinterest | Twitter | Google +

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘AgentPress 2.0: How to stretch header & footer to the full width of the screen?’ is closed to new replies.