Posted by Oxo on

I'm happy with our Banner on a laptop, but on a mobile the first word 'Bournemouth' is split with the last letter 'h' showing on the 2nd line, is there any way of changing the size of the font in the Banner?

 

Posted by Joe Oldak on

I'd use a piece of custom CSS to change this, as there's no way to do it in the theme options.

To do this, add something like this in the Raw Header HTML in the Bootstrap Theme options:

<style>
#banner h1.community-name {
  font-size: 40px;
}
</style>

(The standard size in the Bootstrap theme is 45px)

This will change it to 40px always. If you only want to change it for small screen sizes you could do it like this instead:

<style>
@media (max-width: 767px) {
  #banner h1.community-name {
    font-size: 40px;
  }
}
</style>

Thanks

Joe

Posted by Oxo on

Thank you Joe, much appreciated, works well.