Jump to content

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

Go to solution Solved by kale,

Recommended Posts

  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

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.

Link to comment

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


Link to comment
  • 8 months later...
  • 6 months later...

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.

Link to comment

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

Link to comment
  • 1 year later...
  • 1 year later...

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.