More Outreach Issues :(

[carlos183]

So I'm trying to setup a site using the Outreach theme.  I am having 2 issues 1) header issue 2) general responsive issue.  Here are the details:

1)  I elected to create a custom header and just overlay the logo centered on it.  The problem I have is when I look at it on a tool like quirktools.com/creenfly (no that is NOT a plug for that tool) and view it on their mobile emulators it shrinks the logo in the header to a point where its ridiculously small.  I've also never been able to figure out how to properly place the logo on the site separately from being a layer in the header image, not without having the image leave those dreaded white boxes on either side.  So I'm trying to figure out how to fix that...

2) I went to view the site on an actual mobile phone and the site is severely broken LOL.  It does not show the slider (which I used the genesis responsive slider) and it does not show the home page properly at all...It renders correctly on browser emulators but man its a wreck on an actual mobile device.  So I'm totally at a loss for words there.

I have seen some suggestions for some of the responsive fixes that involve a separate image for every mobile device and I guess I'm a bit stunned at that solution.  Is that really the only / best way to handle that?  Thanks in advance...

Site URL: http://www.mazito.com

[carlos183]

Quick side note / question:  Are there any plugins that are known to conflict with Studio Press / Genesis / Outreach theme?  One that might conflict with the redirect functionality?  Thinking that might be causing the site to revert to an older version and only offer the link to the mobile version when you scroll all the way to the bottom of the page...Thanks!!!

[carlos183]

At this point I think I solved the problem.  For those that struggled like me here's what I did:

In style.css I replaced BOTH #title-area & #header respectively.  Now I at first tried to comment out the original code but that DID NOT WORK.  It wasn't until I fully replaced one with the other that things seemed to work.  I also had to upload an image "logo.png" to the images folder manually.  This can be done either by FTP or a file manager tool.  Oh and the "logo.png" had dimensions of 320px X 120px.  I did NOT solve this on my own.   Its the compilation of the help of several people.  So I don't want credit.  I just want to offer help to those that are / were stuck like me!!

#title-area {
background: url(images/logo.png) no-repeat;
float: left;
overflow: hidden;
width: 400px;
}
#header {
background: #090909 url(images/header.png) center repeat-y;
background-position: center !important;
background-repeat: repeat-y !important;
margin: 0 auto;
min-height: 120px;
overflow: hidden;
width: 100%;
}

[Author]

Posts