Thank you Eric, that was quite helpful and sent me in the right direction.
Epik’s header required a bit more info for the site title as well for the area used
when inserting the header image via Dashboard. Below is what I used to make this work by
placing that code in the 480 and 580 @media sections.
.header-image .site-title a {
float: left;
min-height: 110px;
width: 100%;
}
.header-image .site-header,
.header-image .site-header .wrap {
background-size: contain !important;
}
The minimum height can be adjusted depending on what is within the
header right widget area.
For the @media sections of 767 or larger, I only needed this added:
.header-image .site-header,
.header-image .site-header .wrap {
background-size: contain !important;
}
Hope this also helps others that desire to use custom headers with the Epik theme
for mobile responsive.
