Community Forums › Forums › Archived Forums › Design Tips and Tricks › Header of Outreach Pro
Tagged: header, Outreach Pro, responsiveness
- This topic has 3 replies, 2 voices, and was last updated 10 years, 4 months ago by
manager.
-
AuthorPosts
-
July 29, 2014 at 7:02 pm #116293
manager
MemberHi 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 {
http://armidaletreegroup.org.au
float: right;
font-size: 14px;
font-size: 1.4rem;
width: 0px;
color: #fff !important;
}August 11, 2014 at 10:22 am #118213JanHoek
ParticipantDid 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.
September 6, 2014 at 12:07 am #123016manager
MemberHi 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;
}October 6, 2014 at 8:46 pm #126959manager
MemberHi 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.
-
AuthorPosts
- The topic ‘Header of Outreach Pro’ is closed to new replies.