Jump to content

How to force text size in footer on Mobile

Recommended Posts

  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

48 minutes ago, ThisWayToFabulous said:

Site URL: https://tmha-new-site.squarespace.com/

PASSWORD: tamara

I'm having trouble forcing the text in the footer to be much smaller on mobile. Here's what I used, what am i doing wrong?

/* MOBILE Footer */
@media screen and (max-width: 767px) {
#block-yui_3_17_2_1_1643035101636_6848  p3 {
    font-size: 7px !important;
    letter-spacing: 0em;
        line-height: 1.2em;
  }}

 

Tamara Makeup and Hair Artistry.jpeg

Try

@media only screen and (max-width: 767px) {
  #block-yui_3_17_2_1_1643035101636_6848 span {
    font-size: 15px !important;
  }
}

Let me know how it works on your site

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Yes it worked for size but i cant seem to update the line height?

also i tried to duplicate it for the other line of text and its not doing the whole thing?

Quote
/* MOBILE Footer */
@media only screen and (max-width: 767px) {
  #block-yui_3_17_2_1_1643035101636_6848 span {
    font-size: 10px !important;
            line-height: .5em !important;

  }
}
@media only screen and (max-width: 767px) {
  #block-227b2582479aa1d0375d span {
    font-size: 10px !important;
            line-height: .5em !important;

  }
}

 

 

Tamara Makeup and Hair Artistry.jpeg

Link to comment
19 hours ago, ThisWayToFabulous said:

Yes it worked for size but i cant seem to update the line height?

also i tried to duplicate it for the other line of text and its not doing the whole thing?

 

Tamara Makeup and Hair Artistry.jpeg

Use this new code to adjust line height

@media only screen and (max-width: 767px) {
    #block-yui_3_17_2_1_1643035101636_6848 span {
        font-size:10px !important;
    }
    #block-yui_3_17_2_1_1643035101636_6848 p {
        line-height: 0.5em !important;
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@tuanphan THANK YOU!

Quick question tho...

I duplicated it for the other block too (customized website by...) but for some reason its only applying to half of it? See screenshot!

/* MOBILE Footer */
@media only screen and (max-width: 767px) {
    #block-yui_3_17_2_1_1643035101636_6848 span {
        font-size:10px !important;
    }
    #block-yui_3_17_2_1_1643035101636_6848 p {
        line-height: 0.5em !important;
    }
}

@media only screen and (max-width: 767px) {
    #block-227b2582479aa1d0375d span {
        font-size:10px !important;
    }
   #block-227b2582479aa1d0375d p {
        line-height: 0.5em !important;
    }
}

 

Tamara Makeup and Hair Artistry.jpeg

Link to comment
On 4/20/2022 at 9:18 PM, ThisWayToFabulous said:

@tuanphan THANK YOU!

Quick question tho...

I duplicated it for the other block too (customized website by...) but for some reason its only applying to half of it? See screenshot!

/* MOBILE Footer */
@media only screen and (max-width: 767px) {
    #block-yui_3_17_2_1_1643035101636_6848 span {
        font-size:10px !important;
    }
    #block-yui_3_17_2_1_1643035101636_6848 p {
        line-height: 0.5em !important;
    }
}

@media only screen and (max-width: 767px) {
    #block-227b2582479aa1d0375d span {
        font-size:10px !important;
    }
   #block-227b2582479aa1d0375d p {
        line-height: 0.5em !important;
    }
}

 

Tamara Makeup and Hair Artistry.jpeg

You want add a space between black - pink text?

/* Footer black pink text */
@media screen and (max-width:767px) {
div#block-227b2582479aa1d0375d p a {
    margin-top: 20px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 4/29/2022 at 3:24 AM, ThisWayToFabulous said:

@tuanphan NO, I want the "CUSTOMIZED WEBSITE DESIGN BY" line and the "THIS WAY TO FABULOUS INC" line to be the same size ( the size of this way tofabulous)

Edit this code

@media only screen and (max-width: 767px) {
    #block-227b2582479aa1d0375d span {
        font-size:10px !important
    }

    #block-227b2582479aa1d0375d p {
        line-height: .5em !important
    }
}

to this

@media only screen and (max-width: 767px) {
    #block-227b2582479aa1d0375d * {
        font-size:10px !important;
    display: block !important;}

    #block-227b2582479aa1d0375d p {
        line-height: 2em !important;
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.