Header Not Responsive on 1024

[wtechrbr]

Header image is responsive on devices except 1024. On that size the graphic gets cut off. Changing the min-height in media queries was effective on all other devices, but ineffective on 1024. Have tried other various changes, but am thinking it's something trivial I'm not seeing. If anyone can help, I'd greatly appreciate it. Thanks!

Related CSS:

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

/* Full width header, no widgets */

.header-full-width .title-area,
.header-full-width .site-title {
width: 100%;
}

/* Media Queries------------- */

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

.site-inner,
.wrap {
max-width: 960px;
}

.content,
.site-header .widget-area {
width: 620px;
}

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar {
width: 300px;
}

.footer-widgets-1 {
margin-right: 30px;
}

.split-sidebar-left,
.split-sidebar-right {
width: 100%;
}

.genesis-nav-menu a {
padding: 15px 9px;
}

/* RNB 3-18-16 changed min height from 120 to 330 */
.header-image {
min-height: 210px;
}

}

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

.beautiful-landing .site-inner,
.site-inner,
.wrap {
max-width: 768px;
}

.header-image .site-title a {
background-position: center !important;
background-size: contain !important;
margin: 0;
}

.content,
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar-primary,
.site-header .widget-area,
.title-area {
width: 100%;
}

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

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

}

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

.footer-widgets,
.site-footer {
padding-left: 5%;
padding-right: 5%;
}

.site-inner {
padding: 40px 5%;
}

.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu,
.genesis-nav-menu.responsive-menu {
display: none;
}

.genesis-nav-menu.responsive-menu .menu-item,
.responsive-menu-icon {
display: block;
}

.genesis-nav-menu.responsive-menu .menu-item {
margin: 0;
}

.genesis-nav-menu.responsive-menu .menu-item:hover {
position: static;
}

.genesis-nav-menu.responsive-menu .current-menu-item > a,
.genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover,
.genesis-nav-menu.responsive-menu a,
.genesis-nav-menu.responsive-menu a:hover {
background: none;
line-height: 1;
padding: 16px 20px;
}

.genesis-nav-menu.responsive-menu .menu-item-has-children {
cursor: pointer;
}

.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
margin-right: 60px;
}

.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
content: "\f347";
float: right;
font: normal 16px/1 'dashicons';
height: 16px;
padding: 16px 20px;
right: 0;
text-align: right;
z-index: 9999;
}

.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
content: "\f343";
}

.genesis-nav-menu.responsive-menu .sub-menu {
border: none;
left: auto;
opacity: 1;
padding-left: 25px;
position: relative;
-moz-transition: opacity .4s ease-in-out;
-ms-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
-webkit-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
width: 100%;
z-index: 99;
}

.genesis-nav-menu.responsive-menu .sub-menu .sub-menu {
margin: 0;
}

.genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover,
.genesis-nav-menu.responsive-menu .sub-menu li a,
.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
background: none;
border: none;
padding: 12px 20px;
position: relative;
width: 100%;
}

.nav-primary .genesis-nav-menu.responsive-menu {
padding-bottom: 16px;
}

.pagination li a {
margin-bottom: 4px;
}

.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
}

.header-image .site-title a {
min-height: 169px;
}

}

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

.header-image .site-title a {
min-height: 92px;
}
}

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

.header-image .site-title a {
min-height: 70px;
}
}

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

.header-image .site-title a {
min-height: 53px;
}
}

http://earwarp.com

[Christoph]

Hi,

it looks like you are missing background-size: contain
in .header-image .site-title a
You could either add it to the selector around line 991 of the style.css
or add the selector to the 1139px media query after line 1545

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Author]

Posts