How to force text size in footer on Mobile

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

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

 

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

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;

  }
}

 

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?

 

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

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

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

 

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

@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)

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