Make header length of content

Community Forums Forums Design Tips and Tricks Make header length of content

This topic is: not resolved

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

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #43977

    clarkscondensed
    Participant
    Post count: 48

    I just expanded my website’s content/sidebar area, but now I’m wondering how to expand the outer limits of my header. Here is my site:

    http://69.195.124.91/~clarksco/

    As you can see, the banner lines up with the search bar and the edge of my posts. What I’m wanting to do is have the header be left aligned and start where my sites background/white content area meet (if that makes sense). If you see my banner, there is that tannish bar that goes through the word “condensed,” and I want that to go the entire length of the content area. Is this possible to do? I apologize if this doesn’t make sense at all!

    http://69.195.124.91/~clarksco/
    #44047

    sangfroidweb
    Participant
    Post count: 39

    Hi!
    There is a max-width of 960px being set on the #header div. First change that max-width to 1138px. Then, there is still a padding of 10px being set on the #wrap div that will keep the header content 10px away from the edge of the site. If you want the header content to go all the way to the edge, you will need to remove this padding from #wrap.

    This will affect the lower portion of the site (#inner)…so you may have to adjust the padding on #inner to replace the padding you just removed from #wrap.

    Also, your header image will need to be wider to fit all the way across the larger space of 1138px.

    Hope this helps!

    Liz


    Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com :)

    #44108

    clarkscondensed
    Participant
    Post count: 48

    THat worked for the most part! Thanks! I removed the padding thing, though, and I don’t think it worked. As you can see, the header is still not totally touching the edge:

    http://69.195.124.91/~clarksco/

    Any idea on what to do next?

    Also, maybe you can help me with this other issue. I am trying to make it so there is no background showing above my header (so, have the header extend to the top of the page.) All of the things I have found googling haven’t worked.

    #44113

    clarkscondensed
    Participant
    Post count: 48

    Ah, okay I resolved the first issue. Still wondering about the space above the header, and also — how do I remove the padding around the posts and the sidebar. I’d like to have the items in my sidebar closer to the edge as well (right now there are just social media icons)

    #44270

    sangfroidweb
    Participant
    Post count: 39

    Hi!

    The #inner div is being set to 940px wide (which seems to be breaking the mobile responsiveness also)…..I would change this to width:100% .

    Let me know how it goes.

    :)

     

    Liz


    Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com :)

    #44634

    clarkscondensed
    Participant
    Post count: 48

    Hmm…I tried doing that and it didn’t work.

    #44763

    clarkscondensed
    Participant
    Post count: 48

    I actually got it to work, but now I can’t seem to get the space between the sidebar and content smaller

    (as seen here:)

    http://69.195.124.91/~clarksco/

     

    I have this in my custom code box

     

    width: 90%;
    }
    #header .wrap,
    #footer .wrap,
    #footer-widgets .wrap {
    margin: 0 auto;
    max-width: 720px; //This is the default Prose width, but you can change it if you want.
    }

    #inner {
    width: 100%;
    padding: 0px;
    }
    .content-sidebar #content-sidebar-wrap {
    width: 1100px;
    }
    .content-sidebar #content {
    width: 600px;
    }
    .sidebar {
    width: 300px;
    }

     

    I used to be able to edit this to change the size of the sidebar and content area, but now, it doesn’t do anything

    #44768

    sangfroidweb
    Participant
    Post count: 39

    So, have you tried making the .content-sidebar #content wider and it’s not taking?

    What it looks like in Firebug is that the sidebar is set to 300px wide and the content is set to 590px wide, so they aren’t filling up the available width leaving that space in between.

     


    Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com :)

    #44770

    clarkscondensed
    Participant
    Post count: 48

    Yes I have been adjusting it to make it wider, and nothing changes. I want the content to fill up all that empty space, but nothing seems to take, no matter what I adjust. The only thing that ever changes is when I adjust¬†.sidebar and it pushes part of the sidebar (the photo that’s in it, but not the social icons) closer to the content area.

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

You must be logged in to reply to this topic.