Making Enlarged Header Image Mobile Friendly?

[cmagras]

I need help! I made the header image larger in the php and css. But now it's not mobile friendly. I followed the instructions at this link (http://thepixelista.com/responsive-genesis-child-theme-logo/), but either it didn't work or I missed something. Can someone please help???

Site URL: http://sarahkayhoffman.com

Here is what my current CSS looks like for Media Queries. I made 2 of them super small just to test, but still no difference (as seen on the preview site here: http://www.studiopress.com/responsive/ )

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

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {

.search-form input[type="search"] {
background-image: url(images/[email protected]);
}

}

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

.nav-secondary,
.footer-widgets,
.site-container,
.wrap,
.site-footer {
max-width: 960px;
}

.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
width: 688px;
}

.content {
width: 580px;
}

.site-header .widget-area {
width: 544px;
}

.content-sidebar-sidebar .content,
.sidebar-content-sidebar .content,
.sidebar-sidebar-content .content {
width: 380px;
}

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar-primary,
.title-area {
width: 272px;
}

.home-top-left {
width: 285px;
}

.home-top-right {
width: 579px;
}

}

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

.header-image .site-title a {
background: url(http://www.sarahkayhoffman.com/wp-content/uploads/2016/02/cropped-sarah_SocialProof-2.jpg) no-repeat;
height: 493px;
width: 1023px;
}

.footer-widgets,
.site-container,
.wrap, {
max-width: 772px;
}

.content-sidebar-sidebar .content-sidebar-wrap,
.content-sidebar-sidebar .content,
.content,
.home-top-left,
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content,
.sidebar-primary,
.sidebar-secondary,
.sidebar-sidebar-content .content-sidebar-wrap,
.sidebar-sidebar-content .content,
.site-header .widget-area,
.title-area,
.nav-secondary,
.site-footer {
width: 100%;
}

.header-image .site-title a {
float: none;
margin: 0 auto;
}

.entry-footer .entry-meta,
.sidebar .widget,
.site-header,
.entry-comments,
.comment-respond {
padding: 0;
}

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

.genesis-nav-menu,
.site-description,
.site-footer p,
.site-header hgroup,
.site-header .search-form,
.site-title {
text-align: center;
}

.genesis-nav-menu a {
padding: 16px;
padding: 1.6rem;
}

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

.home-top-left .widget {
float: left;
margin: 0 4px;
margin: 0 .4rem;
width: 32%;
}

.home-top-right {
margin: 0 auto;
width: 694px;
}

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

.entry-footer .entry-meta {
margin: 0;
padding-top: 12px;
padding-top: 1.2rem;
}

.sidebar .widget.enews-widget {
padding: 40px;
padding: 4rem;
}

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

.site-footer {
padding: 24px;
padding: 2.4rem;
}

}

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

.header-image .site-title a {
background: url(http://www.sarahkayhoffman.com/wp-content/uploads/2016/02/cropped-sarah_SocialProof-2-320-e1456515783145.jpg) no-repeat;
height: 48px;
width: 100px;
}

body {
font-size: 14px;
font-size: 1.4rem;
}

.footer-widgets,
.site-container {
width: 94%;
}

.site-container {
padding: 20px 5%;
padding: 2rem 5%;
}

.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%;
}

.genesis-nav-menu a,
.nav-primary .sub-menu a {
font-size: 12px;
font-size: 1.2rem;
padding: 12px;
padding: 1.2rem;
}

.nav-secondary a,
.nav-secondary .sub-menu a {
font-size: 11px;
font-size: 1.1rem;
padding: 10px 8px;
padding: 1rem 0.8rem;
}

.genesis-nav-menu .sub-menu .sub-menu {
margin: -31px 0 0 199px;
}

.nav-primary .sub-menu .sub-menu {
margin: -36px 0 0 199px;
}

.entry-title {
font-size: 30px;
font-size: 3rem;
}

.home-top-left,
.home-top-left .widget,
.home-top-right {
width: 100%;
}

.after-entry .enews-widget input,
.after-entry .enews-widget input[type="submit"],
.home-bottom .enews-widget input,
.home-bottom .enews-widget input[type="submit"] {
width: 100%;
margin-bottom: 10px;
margin-bottom: 1rem;
}

.entry-time:after, .entry-time:before {
border: none
content: none;
width: auto;
}

.home-top-left h4 {
top: 80px;
}

.footer-widgets {
padding: 20px 5% 0;
padding: 2rem 5% 0;
}

}

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

.header-image .site-title a {
background: url(http://www.sarahkayhoffman.com/wp-content/uploads/2016/02/cropped-sarah_SocialProof-2-320-e1456515783145.jpg) no-repeat;
height: 48px;
width: 100px;
}

.site-title {
font-size: 36px;
font-size: 3.6rem;
}

}

http://sarahkayhoffman.com

[cmagras]

UPDATE:

So apparently my cache wasn't clearing like I thought, and I did indeed make the header image mobile friendly! HOWEVER, there is a large white space under the header image when I view it on my phone (and I'm guessing on other screens as well?). Does anyone know what I need to do to remove that??? Here is a link showing a screenshot from my phone of the gap between the header image and menu bar: http://www.sarahkayhoffman.com/wp-content/uploads/2016/02/image1.png

[Author]

Posts