[Resolved] Make site logo wider than content?

[Jaakko Pöntinen]

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

• This topic was modified 10 years, 2 months ago by Jaakko Pöntinen. Reason: Ticked notify me with Email on, forgot when posting

[Tom]

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?

[Jaakko Pöntinen]

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

[Tom]

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.

[Jaakko Pöntinen]

That completely did it. Thank you!

– Jaakko Pöntinen

[Tom]

You’re welcome 🙂

[Author]

Posts