Header Image – Change for Mobile Responsive

[SamBell]

Hi guys, I am working on this site: http://www.sambellcreative.com/doulacare_ts/

I want to change the header that is displayed on mobile OR reduce the space between the logo and the 'MENU' text.

Any ideas? I am stuck!

Thanks,
Sam

http://www.sambellcreative.com/doulacare_ts/

[Brad Dalton]

Check the Media Queries at the end of the style sheet which enable you to change the styling at different screen sizes using CSS rules.

You can test in your browser first by inspecting the element using your browser tool.

You've got a height there of 150px which maybe the problem on smaller screens.

.header-image .site-title > a {
    background-size: contain !important;
    display: block;
    height: 150px;
    margin: 10px auto;
    text-indent: -9999px;
    max-width: 1140px;
}

---

Tutorials for StudioPress Themes.

[SamBell]

Hmm, When I change that 150, it makes the logo really small.

Ok new thought - do you know how to close the gap between the logo and 'menu' on mobile?

[Author]

Posts