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

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

Question

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

Share this post


Link to post
  • 1

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

Edited by kale

Share this post


Link to post
  • 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; }

}



Share this post


Link to post
  • 0

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

Share this post


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

Share this post


Link to post
  • 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;} }

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...