Responsiveness of the banner -Outreach Theme

[manager]

Hi,

The header of the Outreach Theme does not response with some of devices with sizes 768 and 1024. Checked from http://www.studiopress.com/responsive/. Could I ask someone to help me please that where should I fix the problem? I changed CSS like below but it still didn't work.

.header-image .site-title > a {
float: left;
min-height: 100px; to 250px to 200px
width: 90% (changed from 100%)

Many thanks.

http://www.armidaletreegroup.org.au

[nciske]

Try this (in your max-width 1023px media query):

.header-image .site-title > a{
	float: left;
	min-height: 180px;
	width: 100%;
}

.site-title a{
	background: url("http://armidaletreegroup.org.au/wp-content/uploads/cropped-arm-tree-group-header-150-v2.png") repeat-x;
	background-size: contain;
}

---

Nick Ciske | https://luminfire.com/ | @nciske
Did I help you? Say thanks: http://bit.ly/1lahwy0

[manager]

Hi Nick,

Thank you very much for your wisdom. I tried your recommendations in the css stylesheet but it didn't work for me so I am not sure I did it correctly. I have pasted as per following. Please let me know where I made a mistake. Thank you once again.

@media only screen and (max-width: 1023px) {

.wrap {
max-width: 768px;
}
.header-image .site-title > a{
float: left;
min-height: 180px;
width: 100%;
}

.site-title a{
background: url("http://armidaletreegroup.org.au/wp-content/uploads/cropped-arm-tree-group-header-150-v2.png") repeat-x;
background-size: contain;
}
.content,
.content-sidebar-sidebar .content,
.content-sidebar-sidebar .content-sidebar-wrap,
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.footer-widgets-4,
.sidebar-content-sidebar .content,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-primary,
.sidebar-secondary,
.sidebar-sidebar-content .content,
.sidebar-sidebar-content .content-sidebar-wrap,
.site-header .widget-area,
.title-area {
width: 100%;
}

.site-header .wrap {
padding: 20px 5% 16px;
padding: 2rem 5% 1.6rem;
}

.header-image .site-title a {
background-position: top !important;
}

.genesis-nav-menu li,
.site-header .search-form,
.site-header ul.genesis-nav-menu {
float: none;
}

.genesis-nav-menu,
.nav-primary,
.site-description,
.site-header .search-form,
.site-header .title-area,
.site-header .widget-area,
.site-title {
text-align: center;
}

.site-header .simple-social-icons .alignleft,
.site-header .simple-social-icons .alignright,
.site-header .simple-social-icons ul li {
display: inline-block;
float: none;
text-align: center;
}

.genesis-nav-menu a,
.genesis-nav-menu > .first > a,
.genesis-nav-menu > .last > a {
padding: 18px 12px;
padding: 1.8rem 1.2rem;
}

.site-header .search-form {
margin: 16px auto;
margin: 1.6rem auto;
}

.genesis-nav-menu li.right {
display: none;
}

.sub-footer-left {
width: 520px;
}

.footer-widgets-1,
.footer-widgets-2 {
margin-right: 0;
}

}

[nciske]

.header-image .site-title & gt;
    a {
        float: left;
        min-height: 180px;
        width: 100%;
    }

Needs to be:

.header-image .site-title >
    a {
        float: left;
        min-height: 180px;
        width: 100%;
    }

e.g. replace "& g t ;" with a left angle bracket. The forum keeps mangling the code...

---

Nick Ciske | https://luminfire.com/ | @nciske
Did I help you? Say thanks: http://bit.ly/1lahwy0

[Author]

Posts