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

  • 1

Add to Home > Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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 7/1/2020 at 12:01 PM, tuanphan said:

Add to Home > Design > Custom CSS


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

 

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

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
9 hours ago, tuanphan said:

Add to Design > Custom CSS

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

 

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

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

 

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . 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;
}

 

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . 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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . 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...