Pacific: How do I increase the logo size on the mobile display?

My mobile display looks great, however, my logo image is very small compared to how it looks on the desktop view. How can I increase its size on mobile?

This is the CSS you can target for controlling the logo on mobile:

@media only screen and (max-width: 768px) {
 #header #logoWrapper #logoImage img,
 #header #siteTitleWrapper #logoImage img {
   max-height: 50px;
   max-width: 100%;
   width: auto;
   height: auto;
 }
}

Adjust the “max-height” value as needed, and add this to your CSS Editor.

This code hasn't worked on my marquee site. the "@" sign is causing a "syntax error" is there any other way to identify it?

Thank you for this! Worked great!

You can also adjust the alignment of the logo adding this code:

@media only screen and (max-width: 768px) {
 #header #logoWrapper #logoImage img,
 #header #siteTitleWrapper #logoImage img {
   max-height: 80px;
   max-width: 100%;
   width: auto;
   height: auto;
 }
 #header #logoWrapper, #header #siteTitleWrapper {
   text-align:left;
 }
}

I tried every iteration of this code that I could think of, and none of it seemed to affect my logo size. I'm using the Pacific template too.

Any thoughts?

So this code works perfectly on my site in terms of resizing the logo, but there's an issue with the menu on mobile now where the logo covers over the first and second menu items. Is there an easy way to make sure that the list of menu items doesn't start until a specific distance past the bottom of the logo?

This isn't working for me either. I added the custom code to my CSS Editor and changed the max height to 150px then 350px and nothing changed.

This worked perfectly on the Charlotte Template! Thanks!

Found this on another thread, it worked for me.

Try this

THANKS SOOO MUCH! @jkizmann

Works perfectly for me on Pacfic, thanks!

I have this issue too, in Charlotte, but I just want to make sure by adding this I'm not going to mess something up. In Squarespace help, it says CSS shouldn't be used to adjust margins - could break mobile styling, or mess up displays when Squarespace makes updates. Any thoughts on this?

Thanks!

Wish you find a way to succeed.