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

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.

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 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?

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.

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!

This worked perfectly on the Charlotte Template! Thanks!