You’re trying to take advantage of two features here, media queries and display settings. Media queries allow you to target devices based on screen settings. First, you’d need @media screen to make sure the user is viewing your site on an actual screen and not a screenreader or a printed sheet of paper.
Next, you’ll want to specify the screen size. You can do this using either max-width to specify rules that only apply to screens smaller than your number, in your case for phones, or min-width to specify rules that only apply to screens larger than your number, in your case for all other devices. Considering the logo seems to work as is, no need to make it appear when its already there, better to make it disappear otherwise, so I’d go with a min-width: 500px rule that makes the logo disappear when the screen is larger than a phone screen.
Finally, there are a few different ways of making something disappear, chiefly display: none and visibility: hidden. The difference between these two is that display: none actually removes the item, so if it was being used by the theme to take up space, this will break the page. On the other hand, visibility: hidden just makes the item invisible, but any space it is being used to take up still gets taken up, so this is the safer bet.
I checked your site, and the logo has the class site-logo, so you can do what you’re trying to accomplish as follows:
@media screen and (min-width: 500px) {
.site-logo {
visibility: hidden;
}
}
I tried this on your site and here’s what I got:
1
solved How to make logo visible under 500px screen size and invisible over 501px?