Header of Outreach Pro

[manager]

Hi there,

I am wondering that the customised height and width of header in the Outreach Pro would have an impact on the responsiveness of the banner in the website. My issue is the header of the website http://www.armidaletreegroup.org.au does not response to some devices ie Ipad both landscape and portrait and Mobile -landscape. At the edge of the banner got cut off. However, the header shows very nicely if browse from the notebook or mobile -portrait. I have this problem only when I uploaded a new banner size 1140 x 200 on. Some experts gave me some advices but it didn't fix the problem although I appreciate their helps.

I've checked the difference of stylesheet from online difference checker. The following is only what I changed from the original apart from the colours of the theme which I think they would not link with the present issue I am facing.

Here is the comparison of the original and the amendment themes. Many thanks in advance.

Original
.site-header {
background-color: #589b37;
color: #fff;
min-height: 110px;
}

Changed
.site-header {
background-color: #3ab64b;
color: #fff;
min-height: 200px;
}

Original
.title-area {
float: left;
padding: 14px 0;
padding: 1.4rem 0;
width: 340px;
}

Changed
.title-area {
float: left;
padding: 14px 0;
padding: 1.4rem 0;
width: 1140px;
}

Original
.sub-footer-left {
float: left;
width: 785px;
}

.sub-footer-right {
float: right;
font-size: 14px;
font-size: 1.4rem;
width: 235px;
}

Changed
.sub-footer-left {
float: left;
width: 1140px;
color: #fff !important;
-webkit-column-count: 3;
-webkit-column-gap: 20px;

-moz-column-count: 3;
-moz-column-gap: 20px;

column-count: 3;
column-gap: 20px;

}

.sub-footer-right {
float: right;
font-size: 14px;
font-size: 1.4rem;
width: 0px;
color: #fff !important;
}

http://armidaletreegroup.org.au

[JanHoek]

Did you try this? https://gist.github.com/srikat/8469908 I just it before and it works.

---

Hi, my name is Jan Hoek. Sure, they all say I have a big head, but I like to think it’s way too small for all my ideas.

[manager]

Hi Jan

Thank you very much for your attention to this issue. I am just be able to get into my works now. I tried your suggestion but it didn't work for me. The header still is having problem with the devices that has width 768 and up.

What I changed was to replace all codes from style.css in the Responsive Menu section with the code from srikat in GitHub Gist as shown below in (A) and (B).

Also, in the @media only screen and (max-width: 600px), I replaced

.responsive-menu {
display: none;
}

#responsive-menu-icon {
display: block;
}
with the recommendation from srikat which is
#responsive-menu-icon-header,
#responsive-menu-icon-nav {
display: block;
}
}
I still leaves other parts in this section as the original is.

(A) #responsive-menu-icon-header,
#responsive-menu-icon-nav {
cursor: pointer;
display: none;
}

(B) #responsive-menu-icon-header::before,
#responsive-menu-icon-nav::before {
-webkit-font-smoothing: antialiased;
color: #fff;
content: "\e00e";
font-family: 'Icon';
font-size: 16px;
font-size: 1.6rem;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
margin: 0 auto;
speak: none;
text-transform: none;
}

[manager]

Hi there

I have recently discovered the solution for my header responsiveness issue. My header logo is now auto adjusted. I found a good tutorial web on KeyPressWP by Tom Hickey. Here is the link that I followed although it is for Executive Pro but it also seems to work with Outreach Pro theme, in my case anyway.

http://keypresswp.com/full-width-responsive-header-logo-image-for-executive-pro/

Many thanks to Tom Hickey and John Sundberg.

[Author]

Posts