The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Squarespace Mobile CSS Help!??

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #259364

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

    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.