Community Forums › Forums › Archived Forums › Design Tips and Tricks › Make header length of content
- This topic has 8 replies, 2 voices, and was last updated 11 years, 7 months ago by clarkscondensed.
-
AuthorPosts
-
June 4, 2013 at 12:08 am #43977clarkscondensedMember
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/June 4, 2013 at 11:19 am #44047sangfroidwebParticipantHi!
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 π
June 4, 2013 at 10:29 pm #44108clarkscondensedMemberTHat 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.
June 5, 2013 at 12:03 am #44113clarkscondensedMemberAh, 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)
June 5, 2013 at 11:23 pm #44270sangfroidwebParticipantHi!
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 π
June 7, 2013 at 2:31 pm #44634clarkscondensedMemberHmm...I tried doing that and it didn't work.
June 8, 2013 at 9:55 am #44763clarkscondensedMemberI 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
June 8, 2013 at 10:14 am #44768sangfroidwebParticipantSo, 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 π
June 8, 2013 at 10:42 am #44770clarkscondensedMemberYes 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.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.