[Resolved] Text highlight color on mobile header only

[Susanne]

Hi,

I’d like to add a “highlighted” or background white transparency block to the header text for the mobile version only. Is there a place within customization where I can do that? I’ve also been looking for where to set the mobile cropping of the header image to “centered” rather than crop left. Please advise, thanks!

[Leo]

Hi there,

Are you able to provide a link to your site? Thanks!

[Susanne]

Sure, right now it’s http://divadesign-com.apache4.cloudsector.net/wva_concept1b/. You can see the purple header text looks great on the desktop but on mobile there are some problematic spots where it hovers over dark parts of the header images because of cropping.

Thanks!

[Leo]

Sorry not sure what you mean. Are you referring to the slider?

[Susanne]

no, the subpages (ex. http://divadesign-com.apache4.cloudsector.net/wva_concept1b/treatments/other-conditions/)

See how the text “other conditions” gets obscured when it’s positioned over the woman’s dark hair in the header image? On the desktop view it’s centered so there’s no problem. I know it’s possible to set alternate header images, but I’m looking for a place or way to add a white” shadow or bar behind header image text to mobile only.

[Leo]

Try this:

@media (max-width: 768px) {
    .inside-page-header h1 {
        background-color: #ffffff;
    }
}

[Susanne]

That works perfect, thanks!

[Leo]

No problem!

[Author]

Posts