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

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


Guest

Question

  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

9 answers to this question

Recommended Posts

  • -1

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

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

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...