Why is .site-header width set to 90% in new version of Legacy?

This topic has 10 replies, 2 voices, and was last updated 10 years, 7 months ago by Eric.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
September 5, 2013 at 10:08 am #7121
dev77
Customer
Why is the site-header width set to 90% at the 1023px break on line 2931 of style.css? See what happens here when you make your browser window smaller:

http://surgeonsstory.com/wp/
```
@media only screen and (max-width: 1023px) {
....

.site-header,
	.nav-primary .wrap,
	.nav-secondary .wrap,
	.slider .wrap,
	.welcome .wrap,
	.home-bottom .wrap {
		width: 90%;
	}
```
If I change the width to 100% and it works just fine. The other breakpoints are set to 100%. What am I missing here?

(Note: I’m using an 1140px wide jpg file for the header. I know it is not responsive, but I can (hope to) fix that with the Genesis Responsive Header Plugin.)
September 5, 2013 at 10:42 pm #7137
dev77
Customer
Nobody can/will respond to this?
September 5, 2013 at 11:39 pm #7141
Eric
Customer
You gotta give us all at least 24 – 48 hours for a response – https://appfinite.com/topic/forum-rules/. There’s a lot of other users/posts here and its mostly just Wes and myself handling all of these posts (Wes just had a baby today, so just me for now 🙂 ). We are really trying to get others involved by helping out since this is a community forum, but I don’t want you to think we’re skipping over you or anything…..we’re just busy handling other users, and/or busy with other things going on.

The header area is only 90% in the responsive section so the edges aren’t rubbing up against the very end of the browser….basically it gives it some space so you can read it. Keep in mind this is based on a standard white background, so if you add a custom background and customize other parts of the code then you’ll have to make adjustments for it depending on the look you’re going for.

If I were you, I’d make the head-wrap the purple color you have, and then add the logo by itself without the background….then you won’t run into the issue you’re having. You’re adding a logo and background all in one, and it doesn’t repeat, so once the browser is resized there will obviously be white background space left since you didn’t assign a color/style to it (head-wrap). Make sense?

I see you got the pictures working pretty good at 1140px 🙂

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
September 6, 2013 at 11:44 am #7162
dev77
Customer
I did exactly as you suggested… created a .png transparent logo (just text) and put it in the header-wrap using a a purple color code. Is that what you suggested? Or did you want me to use .site-header class?
```
 
 .site-header, #header {

background-image: url(http://surgeonsstory.com/wp/wp-content/uploads/surgeon-header-trans.png);
background-repeat: no-repeat;
 margin: 0px; 
}

#head-wrap {
background-color: #290A58;
}
```
Worked fine. It is not responsive, I thought I could fix it with the Genesis Responsive Header plugin but no go. Any idea how to get this to be responsive? It is only a couple of hundred px wide. Should not get cut off when screen is small.

Al
September 6, 2013 at 2:43 pm #7171
dev77
Customer
Looks like this background-position code in line 2941 of the style.CSS is killing me:
```
.header-image .site-header,
	.header-image .site-header .wrap {
		background-position: center top !important; 
		
	}
```
Is there any way to make this theme work with the Genesis Responsive Header plugin… or is there any way to make the header responsive?
September 6, 2013 at 3:00 pm #7172
dev77
Customer
I took out the above line and it looks OK on an iPad, but not on an iPhone. Any ideas on what to do?
September 6, 2013 at 11:54 pm #7191
Eric
Customer
I honestly don’t think you need to use that plugin. We have so many people who have just added their images manually.

I’d recommend you upload a smaller version of your logo for iPhones/Mobile devices and have that image show up when using a phone. (add it in your responsive section for iPhones)

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
September 7, 2013 at 1:44 am #7200
dev77
Customer
How do you add the images manually?

I made a version of the logo which is 320 px width.

I added the background-image to the style.css under .site-header:
```
@media only screen and (max-width: 480px) {

	.site-header {
		width: 100%;
		background-image: url(http://surgeonsstory.com/wp/wp-content/uploads/surgeon-header-trans-320.png);
	}
```
But it does not load…. no change. What am I doing wrong?

Just point me in the right direction.

Thanks.

UPDATE
UPDATE

I put in a !important and it worked. Don’t know why.

background-image: url(http://surgeonsstory.com/wp/wp-content/uploads/surgeon-header-trans-320.png) !important;
September 7, 2013 at 10:45 am #7208
Eric
Customer
Good job! You can also add background-position: center top; if you need it to center…..I haven’t checked on my phone so I don’t know how it looks, but if it looks fine then just leave it as it is.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
September 7, 2013 at 11:48 am #7216
dev77
Customer
I’m trying to figure out why the !important attribute is necessary.

Also, I found that putting the background-image in #header and the background-color in .wrap only works on the new Legacy HTML version. It does not work on the old version where you have to put the background-image AND background-color in the #header.

This seems to work quite well for http://justbeadad.com/wp/:
```
@media only screen and (max-width: 400px) {

	#header {
		
		background-image: url(http://justbeadad.com/wp/wp-content/uploads/dad-header-320.jpg) !important;
		background-repeat: no-repeat;
		height: 52px;
        min-height: 0px;

	}
	}
```
Thanks for all your help on this. The Genesis Responsive header made things easier, but the report on the Gen board is that it does not work for HTML5 themes and that Nick is fixing it… no idea when it will be released. All in all the above is probably a better solution… the fewer plugins the less potential conflicts you have down the road.

Dev
NewMedia Website Design
September 9, 2013 at 1:01 am #7257
Eric
Customer
I wonder if you have to add !important since the style.css file has priority…especially the responsive section of the main style.css. That’s just a guess, but I’m willing to bet that has something to do with it.

Yes you’re right about the plugins, I agree 100%. Less is better.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.