Meditation Theme – Background Turns Black On Mobile

Home Forums All Other Themes Meditation Theme – Background Turns Black On Mobile

Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #139565
    Lawrence Knox
    Participant
    • Topics: 5
    • Replies: 9
    • Total: 14
    Member since: October 5, 2019

    My site http://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;}
    }

    #139597
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25250
    • Total: 25250
    Member since: August 16, 2013

    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

    #139613
    Lawrence Knox
    Participant
    • Topics: 5
    • Replies: 9
    • Total: 14
    Member since: October 5, 2019

    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

    #139622
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25250
    • Total: 25250
    Member since: August 16, 2013

    Hi,

    Okay, kindly use this one:

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

    Regards,
    Dave

    #139690
    Lawrence Knox
    Participant
    • Topics: 5
    • Replies: 9
    • Total: 14
    Member since: October 5, 2019

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

    If you go to the homepage of http://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)?

    #139726
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25250
    • Total: 25250
    Member since: August 16, 2013

    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

    #139779
    Lawrence Knox
    Participant
    • Topics: 5
    • Replies: 9
    • Total: 14
    Member since: October 5, 2019

    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?

    #139797
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25250
    • Total: 25250
    Member since: August 16, 2013

    Hi,

    Kindly add this CSS code

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

    Regards,
    Dave

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.