Logo Size – Mobile Devices

[twosheastl]

Hello!

I have very little knowledge with CSS. Just enough to make edits on existing code.

I just recently switched from WordPress to SqaureSpace and am having trouble with my logo size on mobile devices. I purposely uploaded my logo large for retina displays and sized it down with SquareSpace’s style editor to 55%.

On my computer it looks fine, but when I load my website on my iphone or Tablet, the logo is HUGE.

There is a custom CSS field where I can place my own code. Is anyone familiar with this issue? Does anyone know how to resolve it?

My URL: http://www.SheaStewart.com
Desired Logo Size: 263px x 55px

Also, the logo should be centered on mobile devices.

Thanks!

Shea

[Atelierbram]

Instead of height you can do max-width

.logo-image .logo {  
 line-height: 0;  
 margin: 0; 
 display: inline-block; 
 /* height: 55px; */  
 max-width: 263px; 
}

For centering you can do margin: 0 auto;

@media only screen and (max-width: 750px) {
 h1.logo {
  text-align: center;
  display: block;
  letter-spacing: 0;
  margin: 0 auto;
 }
}

Don’t think you need the !important

[twosheastl]

That worked as far as keeping it the correct size, but it’s not centered on the mobile device. Its left aligned…

[Atelierbram]

Yes, but you have this !important rule, that you can’t override … specificity battle.

[twosheastl]

So I’m kind of handcuffed by the SqaureSpace designers, huh?

I know others (SS Forums) have come up with their own fixes for other themes, though no one has figured out how to fix the Avenue theme, yet (that I’m aware of).

What if I uploaded at the desired size? Is there a way to upload a x2 logo via CSS for Mobile devices? I am able to upload “Custom Files” via the CSS editor. Maybe I could upload the x2 logo there? Or does that require some kind of Java Script?

Thanks for your help!

Shea

[Atelierbram]

So I’m kind of handcuffed by the SqaureSpace designers, huh?

Don’t know, you could I guess override !important rules with other !important rules: margin: 0 auto !important;, but that’s when you are entering this specificity battle. Ugly.

[Author]

Posts