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

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


MushOn
Go to solution Solved by Jkizmann,

Question

  • Answers 14
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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

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?

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!

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...