Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
Sign in to follow this  
MushOn

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

Question

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?

Edited by MushOn
Tidy

Share this post


Link to post

13 answers to this question

Recommended Posts

  • 7

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.

Edited by Jkizmann
Missing braces

Share this post


Link to post
  • 1

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?

Share this post


Link to post
  • 0

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;
 }
}

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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!

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in to follow this  

×
×
  • Create New...