Simple Header Problem Yet No Solution?

  • My custom header acts a fixed image. So when I zoom out it doesnt expand. It leaves a growing gap of background color on the right side.

    If I remove “no-repeat” following img url. I get the wallpaper effect.

    Is there no code I can add like “stretch accordingly”, “alterdimensions based on zoom ratio”.

    How can I fix this simple issue?

Viewing 7 replies - 1 through 7 (of 7 total)

  • This typically is a CSS issue.

    Without a link to your site we cannot assist in most CSS issues.

    To discover what CSS is output by your theme, use a web inspection tool such as Firebug: https://getfirebug.com/ , Chrome Inspect Element: https://developers.google.com/chrome-developer-tools/ or Internet Explorer 9+ F12 Dev. Tools: https://msdn.microsoft.com/en-us/library/dd565627(v=vs.85).aspx#csstool

    There are others.

    When editing CSS, use a Child Theme
    https://codex.www.ads-software.com/Child_Themes
    Custom CSS Plugin, or Theme provided custom CSS option.
    Edits to parent themes are lost on theme update.

    Learn CSS: https://www.w3schools.com/css/

    Thread Starter dirtyoldlarry

    (@dirtyoldlarry)

    im using a free theme and have already made 80% of my site. Isnt it too late for a child theme? Also is there even a point on a free theme, since updates proabably arent supported anyway?

    If its a css issue cant a minor change to the stylesheet fix this?

    /*-----------------------------------------------------------------------------------*
/* = Header
/*-----------------------------------------------------------------------------------*/
#header-wrap {

background: url(https://mywebsite.com/wp-content/uploads/2013/12/eb9.png) no-repeat ;

        height: 131px;
        margin:0 auto;
        width: 100%;
position: relative;
}
#header {
	margin: 0 auto;
	width: 980px;
	padding: 30px 0;
      position: relative;
	z-index: 99;

}
#logo {
    float: left;
	color: #999;
}
#logo h2,
#logo h1 {
    margin: 0 !important;
    line-height: 1em !important;
    font-size: 36px;
    font-weight: bold;
	font-style: normal;
}
#logo h2 a,
#logo h1 a {
    color: #FFF;
    text-decoration: none;
}
#logo h2 a:hover,
#logo h1 a:hover { color: #FFF }

#top-ad{
	position: absolute;
	top: 20px;
	right: 0px;
}

    Ive tried altering the positions, deleting them all together, removing width100%. Cant figure it out

    The www.ads-software.com support forums are meant for the core application, themes and plugins that are distributed on www.ads-software.com. We do not support themes downloaded from elsewhere.

    Thread Starter dirtyoldlarry

    (@dirtyoldlarry)

    so what? im not asking for a re-write of my entire theme. Just pretend im using twentytwelve or something. Im sure the generic structure of how to fix the problem is the same or similar.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    If you can replicate the problem in Twenty Twelve for example, with all plugins deactivated, please link us to that. You probably can’t because CSS issues are theme-specific.

    We do not support themes downloaded from elsewhere.

    Also a duplicate thread –

    https://www.ads-software.com/support/topic/header-blank-spot-when-zooming-out?replies=2

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Simple Header Problem Yet No Solution?’ is closed to new replies.