Hide logo on mobile

I found these links in another WP support forum:

https://www.ads-software.com/support/topic/hide-header-and-footer-for-mobile-devices?replies=6

None of that seemed to work for me. I have an iPhone 6, but don’t have any other devices to test it on.

Can you link your site?

https://www.therosefinchspa.com

(still in progress). ??

If you’re not using a Child Theme, and if the theme doesn’t have a designated section of the dashboard for CSS modifications then install this Custom CSS Manager plugin https://www.ads-software.com/plugins/custom-css-manager-plugin

Then use its “CSS Code” section of the dashboard to hold your CSS modifications:

Alternatively use your Child Theme style.css file to hold your CSS modifications:

@media screen and (max-width: 320px) {
    .site-logo {
        display: none;
    }
}

Ugh that didn’t work either ??

I am not using a Child Theme but I am using a custom CSS plugin.

Does this work:

body {
    border: 10px solid red !important;
}

?

Yes it made a red border around the page, on mobile as well as regular browser.

Great ?? You can remove that now.

Can you try again putting the code I recommended above:

@media screen and (max-width: 320px) {
    .site-logo {
        display: none;
    }
}

Wait, what size are you referring to as “mobile”?

Logo is still there.

I’m using an iPhone 6 to check the coding.

Try this just to be safe:

@media screen and (max-width: 400px) {
    .site-logo {
        display: none;
    }
}

YAY. That worked but only in Portrait, if I turn my phone sideways to Landscape, the logo is back. Is there a way to make the sizing so that it covers most mobile devices?

You need to define the mobile size (the 400px bit)