Change title size on mobile

Site URL: https://www.markdanielquintos.com

Hi,

I'm using the Avenue template and am trying to change the size of my titles on mobile. I've tried copying and pasting a couple of other codes I've seen on the forums, but none work. I'm on a personal account, but this seems like something that should be fairly simple to do? Perhaps I'm wrong. Thank you!

Add to Home > Design > Custom CSS

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

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

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

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

1 hour ago, tuanphan said:

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

 

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

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!

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?

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.

On 2/3/2021 at 10:21 AM, tuanphan said:

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

Sure! www.sarahkoester.com 

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

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

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

Add to Design > Custom CSS

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

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

14 hours ago, Liza said:

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

Add to Design > Custom CSS

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

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

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?

2 minutes ago, tuanphan said:

The code, I checked on Five demo template.

Can you share link to your site?

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

It's working 

25 minutes ago, Liza said:

it didn't work.

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

35 minutes ago, paul2009 said:

It's working 

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

 

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. 

30 minutes ago, Liza said:

Weird. My kids see it ok. 

 

Nevermind. They don't see it all either.

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

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 ☠️

3 hours ago, tuanphan said:

try changing 20px to 10px ☠️

Thank you! That works, @tuanphan, but it doesn't look so great. Is there a way to display the logo on mobile instead of the site name? 

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