Site title won't resize to fit mobile devices

homegrownkate · Member · Mar 19, 2015 at 9:19 pm
Copy link

Add topic to favorites
Why does my site title not ‘shrink’ to fit a mobile device, when all other features of this theme seem to be compatible with desktop, tablet and mobile? I can’t use a title size any bigger than 5, but would like to be using 10. Is there a code that will help me to change this? Thanks.

The blog I need help with is: (visible only to logged in users)
homegrownkate · Member · Mar 20, 2015 at 1:58 pm
Copy link
Hello and help!!
I’m just wondering if anyone is able to help me with the resizing issues on my blog. Details above.
Thanks.
jsmutek · Member · Mar 20, 2015 at 3:17 pm
Copy link
Hey Kate, you can try this in your custom CSS.
```
/* Media Queries to reduce title font size based on screen size */

@media (max-width: 768px) {
  h1.site-title a {font-size: .9em;}
}

@media (max-width: 604px) {
  h1.site-title a {font-size: .8em;}
}

@media (max-width: 541px) {
  h1.site-title a {font-size: .7em;}
}

@media (max-width: 478px) {
  h1.site-title a {font-size: .6em;}
}

@media (max-width: 413px) {
  h1.site-title a {font-size: .5em;}
}

@media (max-width: 350px) {
  h1.site-title a {font-size: .45em;}
}
```
All this is, is a series of media queries that reduce the size of your title at every point where it breaks to 2 lines.

Max width means “only apply this rule to screens that are this size, or less.” The selectors I am using are pretty specific, targeting only the site title.

On my screen, the first point where I saw the title break to two lines was around 768px.

You could do this with less media queries by, for example, making the font smaller on the first media query, but this should hopefully get you pointed in the right direction.

Hope this helps.
thesacredpath · Member · Mar 20, 2015 at 3:21 pm
Copy link
Due to the length of the first work in your title, and due to the font and size, it is wider than a mobile screen and since it is one word, can’t be broken. We can however use a media query to resize the title below a certain screen/window width. I would suggest resizing it below 480px in screen width. This would be the CSS.
```
@media screen and (max-width: 480px) {
  .wf-active .site-title {
    font-size: 36px;
  }
  .wf-active .site-description {
    font-size: 16px;
  }
}
```
You can check it on your phone and then adjust the font size as desired. 36px seems to work. I also included a declaration to downsize the tagline/description a little. You can keep, edit or delete that part as you like.
thesacredpath · Member · Mar 20, 2015 at 3:22 pm
Copy link
@jsmutek, sorry, I should have refreshed.
jsmutek · Member · Mar 20, 2015 at 3:38 pm
Copy link
Hey, no problem! :)
homegrownkate · Member · Mar 20, 2015 at 4:48 pm
Copy link
Thank you very much, but what do i do with the codes? Copy and paste the whole lot? Into where exactly? Sorry, I should have said, I’m not at all familiar with CSS customisation.
homegrownkate · Member · Mar 20, 2015 at 4:59 pm
Copy link
Hello hello….I think I just worked it out by pasting it into the CSS section in Customisation. Thank you, that’s very exciting!
BUT…. is it possible for the title – Homegrown Kate – to split onto 2 lines when in mobile mode? That way hopefully the font can remain larger for the title than the tagline. Otherwise great.
Thanks again.
homegrownkate · Member · Mar 20, 2015 at 5:03 pm
Copy link
Basically, I’d really like the title to stand out more when in mobile mode.
timethief · Member · Mar 20, 2015 at 5:09 pm
Copy link
I’m just wondering if anyone is able to help me with the resizing issues on my blog.

I am not skilled in CSS editing and apologize, in advance, if what I post is not useful. I saw this thread and wondered if you knew that Sela is a responsive layout theme.

A responsive layout theme adapts to different screen sizes so that your website will work (and be optimized for) iPhones, iPads, Android and other mobile devices. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading.

The mobile ready theme is default and a completely different theme that you do not need to enable at all. When we use a responsive theme we disable the mobile theme at Dashboard > Appearance > Mobile.
homegrownkate · Member · Mar 20, 2015 at 8:15 pm
Copy link
Ok I’ve worked it out. Thank you both for your help. CSS opens up a whole new world of possibilities!!

No items found.