Made a Full Length Header and Mobile Seems Off Now

[kilerb]

I am using Streamline Pro for this site... I made the header full length and got rid of the padding so my header graphic would go across the entire top area. After I installed the social widget in the top right header area, there was a white box over the graphic, so I had to change the site.title area to 1140px wide too. Anyway, now the mobile version is all screwy looking. Did I implement the full header wrong for computer viewing? What's making it looks so off on my iphone now? Thanks!!!

http://www.onemanpodcast.com

[emasai]

Well there are lots of things you will need to do to make it responsive and keep the social media on top right.
For one thing if you set a fixed width on .site-title a, it won't be responsive, put the width on the containing element .title-area. Secondly to make the image itself responsive, don't use shorthand, add each tag separately e.g.
background: url(http://onemanpodcast.com/wp-content/uploads/2014/10/header2.png);
background-size: contain;
background-repeat: no-repeat;

Use a web inspector to change values and preview what you are doing before you make the actual changes. Make a note of each change you make, it's easy to forget which changes you made and where.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[kilerb]

Thanks emasai... I made a couple of these changes... I think I did something wrong though. On my computer's version, the social links dropped below the header. I tried putting the code below into the .site-header and title-area. Neither seemed to make a difference regarding this. As of now, the mobile version does show my entire header, but then there's a huge space between that and the social links, which are also below the header on the mobile version. Sorry, I must've missed something.

background: url(http://onemanpodcast.com/wp-content/uploads/2014/10/header2.png);
	
	background-size: contain;

	background-repeat: no-repeat;

I think it's responsive now though. The entire header is a link. If that's what that means. Hahahah...

[emasai]

Responsive means that it will resize to fit a smaller screen.

I did say that there were a lot of things that needed to be done to make it responsive and just gave you a few pointers. You did not do anything wrong. Specific requests to make a mobile site look like a desktop site are customizations and go beyond the voluntary help of this forum.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[kilerb]

Well from my 5+ years on these boards, I can definitely say people have helped me with much more detailed and specific custom requests than this one. Maybe it's just beyond what you are willing to help with 🙂
But thanks for making it seem like nobody would help with this, in turn making them less apt to jump in now. Haha

[emasai]

So sorry to disappoint you.

Just close this post and start a new one and then you might get all the help you need from someone else.

5+ years is a long time to be around here and still be asking questions. You should be helping other people out from all the knowledge you have gleaned from those willing souls who gave you such detailed information. Just saying.....

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[kilerb]

I unfortunately don't retain all of the knowledge I learn from here. I do reference the help from posts that I've made in the past often though. Rather than asking the same question again. I appreciate your advice, but I have a lot of things going on in the real world that don't give me much time to come on here to help people, with the limited knowledge I have when it comes to css. It would probably be a waste of everyone's time. Of course if I happened to be on and someone asked how to center something, I'd reply. I just don't have the freetime you do unfortunately 🙁

[emasai]

Freetime me? I do this for a living and from time to time I chime in to help people, as I have been helped in the past. It's called giving back and I have also learned a tremendous amount from figuring out other people's problems.

There is however, a limit to how much time I can spend figuring out a particular problem for someone and walking them through it. It also depends on how appreciative or demanding the people are of the advice I am giving them. Please let's not waste any more of your valuable time in unnecessary replies.

Solution: Close this post as resolved and post again with a different title and I truly hope you get more detailed help from someone else.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[kilerb]

Wow, it's like you own the place 🙂 You've laid the law down twice with telling me how nobody will help me on this post and to start a new one. Why don't you just not worry about the situation? Or is this a last word kind of thing? heheheh 🙂

[emasai]

I have not laid down the law at all, on the contrary I am giving you more advice. From experience on this forum, I know that if you bump your post or someone has tried to help you out, other people are not likely to chime in. Just friendly advice, if you want help from someone else, start another post.

I never said nobody would help you, you did! I quote from your post above "But thanks for making it seem like nobody would help with this". That was not my intention at all. If I can't or am not willing to help, the best thing to do is to start another post and let someone else find the solution to your problem.

I don't understand why you would find this aggressive, disagreeable or a last word kind of thing. Either you want help or you don't, bantering with me is not going to get you the help you want.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[kilerb]

Takes 2 to tango, hon.... 🙂

[Author]

Posts