Logo size on mobile

Hello,

I am having trouble with my logo size on mobile, it is tiny! Any help is greatly appreciated.

Website is still a work in progress, link here https://www.franklyinteriordesign.com.au/

Thanks

@iamaem To increase mobile header logo, insert this code to Home > Design > Custom CSS

.Mobile-bar-branding-logo {
    width: 250px !important;
}

Thank you so much! 

Hi there, it's not working for me. I input the code, but the logo height on mobile isn't changing. Do you think it's possible the mobile bar padding is limiting it or something? Any advice greatly appreciated, thank you!

@coriwhat

Most likely the issue you are having is the code was designed for a different version of Squarespace or you are using a different template.

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

On 11/5/2020 at 7:32 AM, coriwhat said:

Hi there, it's not working for me. I input the code, but the logo height on mobile isn't changing. Do you think it's possible the mobile bar padding is limiting it or something? Any advice greatly appreciated, thank you!

Can you share site url or template name? We can check easier

Hey sorry for the delay, thanks so much for the help!! www.thebparlour.com , thank you!!

Hey @tuanphan wondering if I can follow up on this - thank you for your help!!

19 hours ago, coriwhat said:

Hey @tuanphan wondering if I can follow up on this - thank you for your help!!

 

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.header-title-logo {
    width: 300px;
    padding-left: 0 !important;
}
}

Thank you soo much!!

Hi! I tried this code and my logo for mobile is not able to center. This is the website : www.garrettcarterdesigns.com

the logo keeps going off the screen

6 hours ago, Denimrush said:

Hi! I tried this code and my logo for mobile is not able to center. This is the website : www.garrettcarterdesigns.com

the logo keeps going off the screen

Header or Footer logo?

I'm having the same problem with a tiny logo on mobile for my site at www.jacksonchoice.com

I tried inserting the code you shared, but it hasn't fixed it.

Thanks,

10 hours ago, adamrosa said:

I'm having the same problem with a tiny logo on mobile for my site at www.jacksonchoice.com

I tried inserting the code you shared, but it hasn't fixed it.

Thanks,

Add to Design > Custom CSS

/* mobile header logo */
@media screen and (max-width:768px) {
#header #logoWrapper #logoImage img, #header #siteTitleWrapper #logoImage img {
    max-height: 100px !important;
}
}

Hi all, thanks for the help.

I've tried each snipped posted on this thread but non of them are working. I still see my logo tiny on mobile. Any ideas what could be the problem?

Here's my website: https://www.marsolltd.cl/

Thank you!

On 1/23/2023 at 10:21 PM, frankmar said:

Hi all, thanks for the help.

I've tried each snipped posted on this thread but non of them are working. I still see my logo tiny on mobile. Any ideas what could be the problem?

Here's my website: https://www.marsolltd.cl/

Thank you!

Add this to Design > Custom CSS

.mobile-branding-wrapper .mobile-logo-image a {
    max-width: 100px !important;
}

On 1/20/2022 at 7:40 PM, tuanphan said:

Add to Design > Custom CSS

/* mobile header logo */
@media screen and (max-width:768px) {
#header #logoWrapper #logoImage img, #header #siteTitleWrapper #logoImage img {
    max-height: 100px !important;
}
}

 

This worked great but I needed to remove the "important" as it messed with my autoplay video formatting for some reason. Thanks!

On 1/29/2023 at 6:32 AM, Lumenarius said:

This worked great but I needed to remove the "important" as it messed with my autoplay video formatting for some reason. Thanks!

Hi,

Did you solve or still need help with the code?

Solved! Thank you

I'm using a custom logo for some of my pages and the sizing is too large compared to the home page logo.

https://fuchsia-lynx-m5fs.squarespace.com

pass - laguardia

7 hours ago, KG_LDG said:

I'm using a custom logo for some of my pages and the sizing is too large compared to the home page logo.

https://fuchsia-lynx-m5fs.squarespace.com

pass - laguardia

Which page are you referring to?

If you look at any of the non-home pages (Projects - About - Monograph - Contact) 

You'll see that the Blue Logo is much larger on the mobile site - oppose to the home page (White logo) which is a good size.

20 hours ago, KG_LDG said:

If you look at any of the non-home pages (Projects - About - Monograph - Contact) 

You'll see that the Blue Logo is much larger on the mobile site - oppose to the home page (White logo) which is a good size.

Replace this code

<style>
            div.header-title-logo a {
                content: url("https://static1.squarespace.com/static/64ad83554ca3f02ba636f743/t/64c95d7a5d0bc15becbab7e8/1690918266356/LDG+LA+TEXT+LOGO_BLUE+2.png") !important;
                max-width: 380px;
            }
        </style>

with this code

<style>
    header#header img {
                content: url(https://static1.squarespace.com/static/64ad83554ca3f02ba636f743/t/64c95d7a5d0bc15becbab7e8/1690918266356/LDG+LA+TEXT+LOGO_BLUE+2.png) !important;
            }
        </style>

That did resolve the mobile sizing but made the desktop sizing massive.

Is there a mobile specific code?

21 hours ago, KG_LDG said:

That did resolve the mobile sizing but made the desktop sizing massive.

Is there a mobile specific code?

That code will replace mobile + Desktop to new logo

If you want the code different for desktop/mobile, use this new code

<style>
  /* for desktop */
    .header-display-desktop img {
                content: url(https://static1.squarespace.com/static/64ad83554ca3f02ba636f743/t/64c95d7a5d0bc15becbab7e8/1690918266356/LDG+LA+TEXT+LOGO_BLUE+2.png) !important;
            }
  /* for mobile */
   .header-display-mobile img {
                content: url(https://static1.squarespace.com/static/64ad83554ca3f02ba636f743/t/64c95d7a5d0bc15becbab7e8/1690918266356/LDG+LA+TEXT+LOGO_BLUE+2.png) !important;
            }
        </style>

Replace with corresponding image url