Outreach Responsive Header Issues

[MakeYourselfVisible]

Howdy,

I'm working on getting my logo to look nice on mobile devices. I installed the Genesis Responsive Header plugin and put in the logo images in various sizes like it said but it's still not spanning the entire screen when I look at it on my Galaxy S3 (there's space to the right of the logo).

It's not a huge deal but I wanted to know if anyone had an easy enough fix for this.

The website is located at http://stargatesinternational.com/.

Previously I made the customization from this thread to replace the header text with a logo image but I remember that the same issue was occurring before that: http://www.studiopress.community/topic/replace-text-with-logo-outreach/

Thanks in advance!

David

http://stargatesinternational.com

[AnitaC]

What is the screen width of your Galaxy S30? Check the settings in the media queries of the CSS to make sure your screen width is in there.

---

Need help with customization or troubleshooting? Reach out to me.

[MakeYourselfVisible]

Aha! It was because my title area (now logo area) was 430 px and my image was only 290px floated to the left. Everything works fine once I put in a 430px wide image 🙂

[MakeYourselfVisible]

I ended up keeping the 291px image and reducing the logo area size to match because I didn't want the header to get much taller...basically changed the width in this code:

#title-area {
background: url(images/logo.png) no-repeat;
float: left;
overflow: hidden;
width: 291px; /* to match image, originally 430px */

 

Cheers,

David

[MakeYourselfVisible]

It looked like it was working before but now it's showing the extra space on the right still for whatever reason. I cleared the cache on my phone too so that's not the issues either.

Hmmm now I'm super confused.

[Author]

Posts