Archived topic
Make site logo wider than content?
5 replies · Started by Jaakko Pöntinen on January 21, 2016
I just cannot figure out how to make the site logo wider than the content AND centered on the page. I've succeeded in making it wider with .header-image {max-width:110%;} but it'll just and only spread to the right. I just don't understand what to edit and i'm gonna cry pretty soon :(
Firebug shows this as the content of the site's header:
<header id="masthead" class="site-header" itemscope="itemscope" itemtype="http://schema.org/WPHeader">
<div class="inside-header grid-container grid-parent">
<div class="site-logo">
<a rel="home" title="xxxxxxxxxxx" href="http://xxxxxxxx/">
<img class="header-image" title="xxxx" alt="xxxx" src="http://xxxx/wp-content/uploads/2016/01/WIDERHEADERTEST.jpg">
</a>
</div>
</div>
</header>And i don't understand HTML or CSS very well. I just want my site to be purtyyy... And see my design vision come to life... Boohoo *sob*
Thanks.
- Jaakko Pöntinen
Hi there,
What exactly are you trying to do? Making anything 110% width generally isn't a great idea.
Any chance you can link me to your site?
I'd love to give you the link but I'm doing work for my company and can't share unfinished work.
What I'm trying to do is have the site logo act as a header image and a link to the main page of the site I'm composing. BUT: I want the site logo to be wider than the container that contains post, sidebars etc. I also want the site logo to be aligned to the center of the page, being equally wider than the main container from left and right.
For example: 1500px wide site logo center aligned on top a 1100px wide content container.
Thanks,
- Jaakko Pöntinen
You could try this CSS:
.inside-header.grid-container {
max-width: 1500px;
text-align: center;
}Shot in the dark since I can't see the site, but it may help.
That completely did it. Thank you!
- Jaakko Pöntinen
You're welcome :)