{"id":5250,"date":"2022-08-27T11:36:44","date_gmt":"2022-08-27T06:06:44","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/"},"modified":"2022-08-27T11:36:44","modified_gmt":"2022-08-27T06:06:44","slug":"solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/","title":{"rendered":"[Solved] How to make logo visible under 500px screen size and invisible over 501px?"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

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<\/code> to make sure the user is viewing your site on an actual screen and not a screenreader or a printed sheet of paper.<\/p>\n

Next, you’ll want to specify the screen size. You can do this using either max-width<\/code> to specify rules that only apply to screens smaller<\/em> than your number, in your case for phones, or min-width<\/code> to specify rules that only apply to screens larger<\/em> 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<\/code> rule that makes the logo disappear when the screen is larger than a phone screen.<\/p>\n

Finally, there are a few different ways of making something disappear, chiefly display: none<\/code> and visibility: hidden<\/code>. The difference between these two is that display: none<\/code> 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<\/code> 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.<\/p>\n

I checked your site, and the logo has the class site-logo<\/code>, so you can do what you’re trying to accomplish as follows:<\/p>\n

@media screen and (min-width: 500px) {\n  .site-logo {\n    visibility: hidden;\n  }\n}\n<\/code><\/pre>\n
I tried this on your site and here’s what I got:<\/strong><\/p>\n
\"New<\/a><\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            1<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved How to make logo visible under 500px screen size and invisible over 501px? <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] 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, … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,346],"class_list":["post-5250","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-html"],"yoast_head":"\n[Solved] How to make logo visible under 500px screen size and invisible over 501px? - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] How to make logo visible under 500px screen size and invisible over 501px? - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] 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, ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-27T06:06:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/08\/Solved-How-to-make-logo-visible-under-500px-screen-size.jpg\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] How to make logo visible under 500px screen size and invisible over 501px?\",\"datePublished\":\"2022-08-27T06:06:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/\"},\"wordCount\":285,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/08\/Solved-How-to-make-logo-visible-under-500px-screen-size.jpg\",\"keywords\":[\"css\",\"html\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/\",\"name\":\"[Solved] How to make logo visible under 500px screen size and invisible over 501px? - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/08\/Solved-How-to-make-logo-visible-under-500px-screen-size.jpg\",\"datePublished\":\"2022-08-27T06:06:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/#primaryimage\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/08\/Solved-How-to-make-logo-visible-under-500px-screen-size.jpg\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/08\/Solved-How-to-make-logo-visible-under-500px-screen-size.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] How to make logo visible under 500px screen size and invisible over 501px?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] How to make logo visible under 500px screen size and invisible over 501px? - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] How to make logo visible under 500px screen size and invisible over 501px? - JassWeb","og_description":"[ad_1] 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, ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/","og_site_name":"JassWeb","article_published_time":"2022-08-27T06:06:44+00:00","og_image":[{"url":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/08\/Solved-How-to-make-logo-visible-under-500px-screen-size.jpg","type":"","width":"","height":""}],"author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] How to make logo visible under 500px screen size and invisible over 501px?","datePublished":"2022-08-27T06:06:44+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/"},"wordCount":285,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"image":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/#primaryimage"},"thumbnailUrl":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/08\/Solved-How-to-make-logo-visible-under-500px-screen-size.jpg","keywords":["css","html"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/","url":"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/","name":"[Solved] How to make logo visible under 500px screen size and invisible over 501px? - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"primaryImageOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/#primaryimage"},"image":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/#primaryimage"},"thumbnailUrl":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/08\/Solved-How-to-make-logo-visible-under-500px-screen-size.jpg","datePublished":"2022-08-27T06:06:44+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/#primaryimage","url":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/08\/Solved-How-to-make-logo-visible-under-500px-screen-size.jpg","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/08\/Solved-How-to-make-logo-visible-under-500px-screen-size.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-make-logo-visible-under-500px-screen-size-and-invisible-over-501px\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] How to make logo visible under 500px screen size and invisible over 501px?"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/5250","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=5250"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/5250\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=5250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=5250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=5250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}