No customizations are showing in Mobile Responsive

[gallagherBD]

This is the first time that this is happening. I have a site I am working on for a client and the customizations or background color, stackings, and more are not showing up on mobile view. Can you take a look:
https://sarahkaneartist.com/

Thanks!

[marc_a]

Hi @gallagherBD,

Thanks for reaching out.

Please let us know what customization and background color you added on your website specifically on the mobile view so that we can better help you to sort out your issue. Providing screenshots and video is a great help.

Hope that helps.

Thank you.

[gallagherBD]

Hello Marc,
There is a backgroud color, there is a space between the slider and the content, there is another background color behind a section of content that is not showing.

Take a look at the website on desktop adn shrink it to mobile. You will see.

[prakash_s]

Hello @gallagherBD,

It might be the issue of invalid HTML markup. it seems that you are using Wpbakery page builder. In order to help you with your concern please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts

Thanks

[gallagherBD]

Attached. Let me know if you need anything else.

[ruenel]

Hello @gallagherBD,

The given credentials do not work for us. The username seems incorrect. Anyway, I manage to track down the cause of your issue. It turns out that you have added this custom CSS:

@media(min-width:768px){
    .x-topbar p.p-info{
        float:right;
    }
    .x-topbar p{
        font-family:"lato"
    }
    .text-shadow{
        text-shadow:.1em 0.1em rgba(0,0,0,0.75) !important;
    }
    .site{
        background-color:#81807e;
    }
    .x-topbar{
        background-color:#81807e
    }
    .x-topbar p{
        color:white
    }
    .x-colophon.bottom{
        background:#81807e;
    }
    .x-colophon.bottom p{
        color:white
    }
    .home .x-slider-container{
        border:0;
    }
    .home .x-main.full{
        margin-top:0;
    }
    .home .x-main.full .entry-wrap{
        padding-top:0;
    }
    .remove-space.wpb_content_element{
        margin-bottom:0;
    }
    h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
        margin-top:0;
    }

This code will only be applied to a screen size of 768 pixels or greater. If you want these styles to be applied in all screen sizes, you may remove the @media(min-width:768px){ at the beginning of the code.

Best Regards.