Squarespace Mobile CSS Help!??

[heyjoanne]

With Squarespace….. there just aren’t enough resources to fixing anything on your own. It’s an untouched tutorial market.

Could someone help me figure out what I imagine is SUPER simple?!

My main site looks great, its just the image on my mobile doesn’t show the banner image font. I want to shrink the mobile banner down in height to proper scale while ZOOMING in on the font (width)

http://www.joannedesignco.com << You'll see the SUPER tiny pink text on the banner, that's what I want to zoom in on and resize.

ONLY Code I can find relevant…

 @media only screen and(max-width:640px)   
 {
   #page-thumb > img {padding-left: 175px!important;  width:300px!important; height:150px!important; }
 }

[Atelierbram]

The tiny pink text on the banner is tiny to begin with, and is not really text but replaced by this newbannernow.png: that’s where the trouble begins. If this text is important, it should be part of the content, something like:

<h1 class="site-title">Truly unique design company</h1>
<p class="tagline">A truly unique tagline</p>

Targeting this tagline now in CSS becomes trivial.

With the HTML markup like it is now, one would be fighting the dynamically updated javaScript on the image when trying a crazy ugly hack like this:

 @media only screen and(max-width:640px) {
  .Index-page-image > img[style] {
    width: 1200px !important;
    height: 900px !important;
    left: -432px !important;
    top: -109px !important;
  }
}

So best not go down this route: it’s a recipe for disaster.

[Author]

Posts