Change header displays as screen size diminishes — Enterprise Pro theme

[dawnski]

Hi Folks,
My website completely goes away on smaller screen sizes. I'm told the home page is using a class of .header-image on the entire page and to insert the following css:

@media only screen and (max-width: 1024px)
style.css?ver=3.1.3:2399
.header-image {
    display: none !important;
}

I did ( in the @media rules area of the stylesheet) and the problem remained. I know it's a simple change but I dont know how to fix it. I'm under the gun and right now I'd just be happy to eliminate the header from all but desktop sized screens, just to get the site to display across devices.

Advice is much appreciated.

--Dawn

http://www.wsoms.org

[Brad Dalton]

Try this:

@media only screen and (min-width: 1024px) {

    .header-image {
        display: none !important;
    }

}

---

Tutorials for StudioPress Themes.

[dawnski]

Thankyou Brad. I stuck it in but it didnt change anything. At this point there are so many @media settings in different places that it's rather a mess. I guess I'll have to hire someone to fix it and then show me what I've been doing wrong. Sigh. Thanks again.
-dawn

[Brad Dalton]

If you want to use different sized header images at different screen widths, this code i wrote for a client works really well. See the video demo

---

Tutorials for StudioPress Themes.

[Author]

Posts