Jump to content

Change title size on mobile

Recommended Posts

12 hours ago, tuanphan said:

@media screen and (max-width:640px) { body.site-title .logo a { font-size: 20px; } }

Worked perfectly for the title! 

 

Tried doing this for the subtitle but didn't work:

Quote

@media screen and (max-width:640px) {
  body.site-title .logo-subtitle a {
    font-size: 20px;
  }
}

 

Link to comment
3 hours ago, mquintos said:

Would love to do the footer as well, if you'd be so kind to help me learn!

@media screen and (max-width:640px) {
body.site-title .logo a {
    font-size: 20px;
}
.logo-subtitle {
    font-size: 10px;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
17 minutes ago, mquintos said:

thank you for this, what id? class? would i put in to affect the footer?

Got it! Using this: 

 

Quote

@media screen and (max-width:640px){
  #footerBlock p {
    font-size: 10px;
  }
}

Thanks again, it's hard to learn, but exciting once you figure something new out!

Link to comment
  • 6 months later...
On 2/7/2021 at 1:55 PM, tuanphan said:

Add to Design > Custom CSS


@media screen and (max-width:640px) {
#navigator .siteTitle img {
    max-height: 10px;
}
}

 

It still doesn't change. The mobile title also doesn't look pretty in general. 
I would like to get rid of the opacity effect, change the font size to my CI and make the text smaller.
Do you have any suggestions on how to achieve this?
Screenshot of situation (after adding your custom css advice) attached

IMG_92F9A0FB3B0A-1.jpeg

Link to comment
On 2/12/2021 at 7:17 PM, sarahjo said:

It still doesn't change. The mobile title also doesn't look pretty in general. 
I would like to get rid of the opacity effect, change the font size to my CI and make the text smaller.
Do you have any suggestions on how to achieve this?
Screenshot of situation (after adding your custom css advice) attached

IMG_92F9A0FB3B0A-1.jpeg

Add to Design > Custom CSS

@media screen and (max-width:640px) {
#grid .item .wrapper {
    background-color: transparent;
}
#grid .item .wrapper * {
    font-size: 12px !important;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 5 months later...
14 hours ago, Liza said:

I'd like to adjust mine as well. Five 7.0.  Thank you!

IMG_8544BC8135AB-1.jpeg

Add to Design > Custom CSS

/* Five mobile site title */
@media screen and (max-width:768px) {
#mobile-navigation-title a {
	font-size: 20px !important;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

It's working 

25 minutes ago, Liza said:

it didn't work.

🤔 It's working for me Liza. Maybe try a refresh?

u27M5Asyj8.gif.d028590c2b3ce2c410071ec247496b3e.gif

 

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
35 minutes ago, paul2009 said:

It's working 

🤔 It's working for me Liza. Maybe try a refresh?

u27M5Asyj8.gif.d028590c2b3ce2c410071ec247496b3e.gif

 

Hmm. I did multiple times @Paul2009. Checked on Safari and Chrome on my iphone 12, and on another iphone SE. ?? I just rebooted and still no go.

Weird. My kids see it ok. 

 

Edited by Liza
more info
Link to comment
1 hour ago, Liza said:

I just rebooted and still no go.

Curious! What happens if you replace the code that Tuan provided with this:

#mobile-navigation-title a {
  font-size: 20px!important;
}

 

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
4 hours ago, paul2009 said:

Curious! What happens if you replace the code that Tuan provided with this:

#mobile-navigation-title a {
  font-size: 20px!important;
}

 

I tried that, too, @paul2009 and it works! Thank you! It's just is so tiny now, it doesn't fill up the space well. Is there a way to use the logo on mobile instead of the site title? (I asked @tuanphan the same thing below.)

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.