Hiding Logo on Mobile Only

Hello, I'd love to be able to hide my logo on my mobile site only, I love how it looks on desktop but it takes up too much room that just doesn't make sense at the top of the page on mobile.

www.ariarosedurward.com

Add to Home > Design > Custom CSS

@media screen and (max-width:800px) {
#logo .logo.image img {display: none !important;}
}

On 1/5/2020 at 3:48 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:800px) {
#logo .logo.image img {display: none !important;}
}

 

I had issues with the above code hiding the logo on mobile, but this code in red worked for me:

/* Remove logo from desktop homepage */
.homepage .header-title-logo {
  display: none!important;
}

/* remove mobile homepage logo */
body.homepage .header-mobile-logo{
    visibility: hidden;
}

12 hours ago, Hilco said:

I had issues with the above code hiding the logo on mobile, but this code in red worked for me:

/* Remove logo from desktop homepage */
.homepage .header-title-logo {
  display: none!important;
}

/* remove mobile homepage logo */
body.homepage .header-mobile-logo{
    visibility: hidden;
}

My code is for Squarespace 7.0 version.

Your code is for Squarespace 7.1 version.

On 9/30/2022 at 2:43 PM, Hilco said:

I had issues with the above code hiding the logo on mobile, but this code in red worked for me:

/* Remove logo from desktop homepage */
.homepage .header-title-logo {
  display: none!important;
}

/* remove mobile homepage logo */
body.homepage .header-mobile-logo{
    visibility: hidden;
}

On 10/1/2022 at 3:40 AM, tuanphan said:

My code is for Squarespace 7.0 version.

Your code is for Squarespace 7.1 version.

All three versions of the code do not work at all for me. I am on 7.1 and I only managed to remove the logo completely from the website (desktop and mobile). Inspect in Chrome shows that no matter the screen resolution, the website treats logo as "header-title-logo" and it is used for both desktop and mobile.

Would you know how to fix it?

Link: https://www.ecoflame.ca/store/p/el-camino-24-2es64-6mnh2-gwfnb

On 12/2/2022 at 6:54 AM, Pimlico6ix said:

All three versions of the code do not work at all for me. I am on 7.1 and I only managed to remove the logo completely from the website (desktop and mobile). Inspect in Chrome shows that no matter the screen resolution, the website treats logo as "header-title-logo" and it is used for both desktop and mobile.

 

Would you know how to fix it?

 

Link: https://www.ecoflame.ca/store/p/el-camino-24-2es64-6mnh2-gwfnb

To hide Logo on mobile only, use this CSS

@media screen and (max-width:767px) {
	header#header img {
		visibility: hidden !important;
}
}