How do I change the size of the Site Title for mobile site?

Site Title is coming up too big in the mobile version of my site. Any tips on how to adjust this would be greatly appreciated.

alanalouisemay.com/blog

Thanks!

You can use a media query to adjust the font size based on the width of the window, try adding this to your Custom CSS section.

@media only screen and (max-width: 640px) {

 #header h1.site-title { font-size: 24px; }
}

That will reduce the font size to 24px when the screen width is 640px or less. Adjust the font size (and/or max-width value) to your liking, but 640px and 480px are common values for max-width when targeting mobile devices.

That worked, thanks heaps!

I like how the site-title displays on my cover page mobile site, for some reason I can't seem to get it to that display in that size on the blog. Looks like the width of the title area is narrower or something on the blog. How can I change this?

Also, I'd like to affect the blog entry-titles using the same code as given above - but I can't figure out what code to address it with, ie.

@media only screen and (max-width: 640px) {

#??? h1.entry-title { font-size: 24px; }

}

If you want to affect blog titles with a media query, it would be this:

@media only screen and (max-width: 640px) {  .collection-type-blog article .entry-title { font-size: 12px; }}

Thank you!

Try adding this into the Custom CSS Tab, you can adjust the font-size to something which suits you.

@media only screen and (max-width: 640px){
   #siteTitle, #siteTitle a 
   {font-size:30px;}
}

I'm having a similar issue. I've tried to copy and paste the solutions listed into my Custom CSS section, but they aren't solving my problem.

I'm using the Haute Template and need the Blog Post Titles to be smaller on mobile devices. (They are currently too big and cropping poorly on the phone, but look great on the website). Does anyone have a CSS code that will make the blog post title text on mobile devices smaller? Thanks for helping.

I figured out the answer to my own question. To make the Blog Post Titles smaller on the Haute template (on mobile devices) this is the code I used:

@media only screen and (max-width: 640px) {.tweak-blog-list-layout-feature .BlogList-item--list .Blog-title {font-size: 6vw;} }

This worked perfectly for me after many other things didn't. Thank you so much!!

Very useful article you can use our website.