Epik header image not responsive

[gandrson]

Hi - I'm using Epik and uploaded a logo image to the cutom header. I'm having problems with it resizing to fit screen sizes below 1023px. I've tried to control the size of the title-area, but have only been successful in making the entire header smaller. I can't figure out how to control just the logo image.

The site is
staging.hauntedmesadesign.com/MuddyPuppy

Thanks,
Gretchen

http://staging.hauntedmesadesign.com/MuddyPuppy

[WhiteleyDesigns]

Something like this should help you out:

@media (max-width: 1023px) {
.header-image .title-area {
     width: 100%;
     text-align: center;
}
.header-image .site-title a {
     width: 450px;
     float: none;
     display: inline-block;
}
}

It is a bit tougher working with that logo in the header as it is set as a background image on the anchor tag. You may need to fool around with this at different screen sizes, but this should be a good starting point.

---

Matt Whiteley – WhiteleyDesigns, GitHub
Designing, Developing & Creating with WordPress

[gandrson]

Thank you- it's fixed!

I have 2 more problems if you are interested in helping again.

The first has to do with the responsive menu icon - I can't seem to get it to center. It's floating off to the right.

The other has to do with the feature-home-1 and feature-home-2 widgets. I added a different background (tiled background image) on the smaller screen size and I can't get them to cover 100%. I tried repeat, that didn't work at all. Basically there is a left and right margin that I can't find or figure out.

Thanks again for help with the header.
Gretchen

[gandrson]

Never mind! I figured this out today. Thanks for your help on the other.
Gretchen

[Author]

Posts