CODEWITHSUNDEEP
csswordpresspositionalignment
Toby
Toby

Reputation: 390

How do I get my header image to stay anchored during resize?

I'm running a website at www.thehumorwriters.com. It's based on the 2013 Wordpress theme.

When the window is resized, the header image remains anchored to the right side of the screen and gets cut off quickly if the window is too small. This is a problem on netbooks and other low-resolution displays, where by default the left side of the logo is cut off.

I would like to have the image anchored to the left side, so that as it's resized it remains fixed. It seem simple enough, but I'm using Firebug and the changes I thought would solve the problem - like background-attachment: fixed, background-position: left top, or adjusting the margins or padding - don't seem to have any affect. Setting position to absolute messes up the theme.

The relevant section from HTML:

<header id="masthead" class="site-header" role="banner">
            <a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
            </a>

From the 2013 Theme CSS:

.site-header .home-link {
    color: #141412;
    display: block;
    margin: 0 auto;
    max-width: 1080px;
    min-height: 230;
    padding: 0 20px;
    text-decoration: none;
    width: 100%;
}

From my child theme CSS: 

.site-header .home-link {
    min-height: 170px;
}

What am I missing here?

Upvotes: 0

Views: 119

Answers (2)

nydame
nydame

Reputation: 351

Try .site-header .home-link {...max-width: 100%;...}.

Upvotes: 0

jwdmsd
jwdmsd

Reputation: 2137

Change the min-height: 170px; to max-height: 170px;

Upvotes: 0

Related Questions