Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Change title size on mobile


mquintos

Question

Recommended Posts

  • 0
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
  • 0
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

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
  • 0
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
  • 0
On 2/1/2021 at 9:12 AM, sarahjo said:

for some reason this doesn't work on my site – how can I fix this?

Can you share site url? Each template needs a different code.

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
  • 0
23 hours ago, sarahjo said:

Sure! www.sarahkoester.com 

Add to Design > Custom CSS

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

 

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
  • 0
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
  • 0
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

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
  • 0
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

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
  • 0
15 minutes ago, Liza said:

Thank you, @tuanphan, but it didn't work. 😞

The code, I checked on Five demo template.

Can you share link to your site?

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
  • 0

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: Sqsp Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Expert and founder of 
SF Digital, a company dedicated to improving websites by building the features Squarespace didn't include™. See our range of extensions to improve your online store.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0
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
  • 0
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: Sqsp Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Expert and founder of 
SF Digital, a company dedicated to improving websites by building the features Squarespace didn't include™. See our range of extensions to improve your online store.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0
3 hours ago, Liza said:

https://www.inspiredsm.com/  You helped me a while ago with the homepage image. Maybe that's getting in the way?

 

try changing 20px to 10px ☠️

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
  • 0
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
  • 0
1 hour ago, Liza said:

Is there a way to display the logo on mobile instead of the site name? 

On the Five template, the site logo can appear on mobile if you position the logo in the banner instead of the header. You can set this in Site Styles, by setting the Banner Content tweak to "Site Title Logo Tagline".

However, if the site logo is in the header (as it currently is) then the logo will always be replaced by the site title. It isn't possible to change this with some simple CSS, it will require some JavaScript (and therefore a Business plan or above).

About: Sqsp Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Expert and founder of 
SF Digital, a company dedicated to improving websites by building the features Squarespace didn't include™. See our range of extensions to improve your online store.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

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...