Custom Logo and Header Graphics too Large on Mobile Platform

I see that you already have some media queries in your child theme’s style.css file, so just add some rules that resize and/or reposition your elements at smaller screen sizes. For example, in the media query section for max-width of 450px, you can try adding these rules:

#branding hgroup {
   margin: 10px;
}
#site-title {
   padding-top: 0;
}
img#site-logo {
   width: 100%;
   height: 100%;
}
#header_icons {
   float: none;
   clear: both;
   margin-top: 0;
   margin: 0 auto;
   display: table;
}
#header_icons_two {
   float: none;
   clear: both;
   width: 100%;
   margin-top: 10px;
   widtH: 100%;
}
#header_icons_two img {
   width: 60%;
   height: auto;
   margin: 20px auto;
   display: table;
   float: none;
}

Wow! Thanks a lot that did the trick. I really appreciate that! If you play guitar, bass, drums, or ukulele send me an email: [email protected]. I’d be happy to give you a months free membership!

Cheers,

Andrew