Meditation Theme – Background Turns Black On Mobile

[Lawrence Knox]

My site www.knoxstudy.com uses the Meditation theme. The background colour is set to white, and it appears white on a desktop. However, when on mobile, the background changes to black. How do I keep the background colour white on mobile?

I originally went to SKT with this problem, and they gave me the following CSS edit. This has sorted the problem for the home page, but none of the other pages.

@media screen and (max-width: 29.938em) {
#skt-builder-home-section1-block-38 {background-color:#ffffff !important;}
#skt-builder-home-section2-block-167 {background-color:#222 !important;}
#sktbuilder-iconbox-block-528 {background:#ffffff !important;}
#skt-builder-home-section7-block-510 {background:#ccc !important;}
#skt-builder-home-section5-block-421 {background:#ffffff !important;}
}

[Sonnal S Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

@media screen and (max-width:767px) {
.home.has_trans_header.page .header {
    background: #fff !important;
}
#simple-menu .fa-bars {
    color: #282828 !important;
}
span.desc {
    color: #282828;
}
}

Regards,
Dave

[Lawrence Knox]

Hi,

The above code changes the colour of the header of the front page. That’s not what I’m asking for.

I want the background colour OF ALL PAGES to be white on mobile. They are currently white on desktop but change to black on mobile.

The home page is fine, and I’m not looking for any changes to it.

Thanks

[Sonnal S Sinha]

Hi,

Okay, kindly use this one:

@media screen and (max-width:767px) {
body {
    background:#fff !important;
}
}

Regards,
Dave

[Lawrence Knox]

Thanks for that it’s much better. One last thing, though:

If you go to the homepage of www.knoxstudy.com on the iPhone, you can no longer see the burger menu. Please can we have a black strip at the top of the mobile home page (as there was before)?

[Sonnal S Sinha]

Hi,

Kindly use this CSS code:

@media screen and (max-width:1023px) {
#simple-menu .fa-bars {
    color: 
    #000 !important;
}
body {
    background:#fff !important;
}
}

Regards,
Dave

[Lawrence Knox]

The above code(s) you have given me has changed the background to white. Thank you. That’s what I wanted.

However, they have also removed the header from some pages on mobile, e.g. https://knoxstudy.com/shortcodeourteam/ has a header on desktop but not on mobile. Please can I get these headers back?

[Sonnal S Sinha]

Hi,

Kindly add this CSS code

@media screen and (max-width:767px) {
.page_head_bg, .post_head_bg { min-height:110px !important;}
}

Regards,
Dave

[Author]

Posts