XF 1.4 Smaller title as part of the responsive design?

PVO_Dave

Active member
Hi,

We've got a really (stupidly) long title on our forums, as I've found in the past that this has massively improved our SEO (at the sacrifice of the look).

Is there any way I can set it to be a smaller font or something when the site has been scaled down for mobile / tablet?

There's basically nothing useful above the fold in the mobile view at the moment.

IMG_0450.png

Thanks for any input in advance.

Dave.
 

Brogan

XenForo moderator
Staff member
You can use a media query to reduce the font size based on the browser width.

There is a link in my signature to a resource explaining responsive design.
 

PVO_Dave

Active member
Thanks Brogan, I'll take a look at your guide. I may well have some questions after though if that's OK? :)
 

PVO_Dave

Active member
Hi @Brogan

As expected :)

I added this to extra.css
Code:
/* Title font */

<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveWideWidth) {
        .titleBar h1 {
    @property "h1";
    font-size: 18pt;
    overflow: hidden;
    zoom: 1;
    @property "/h1";
}
    }

    @media (max-width:@maxResponsiveMediumWidth) {
                .titleBar h1 {
    @property "h1";
    font-size: 12pt;
    overflow: hidden;
    zoom: 1;
    @property "/h1";
}
    }

    @media (max-width:@maxResponsiveNarrowWidth) {
                .titleBar h1 {
    @property "h1";
    font-size: 12pt;
    overflow: hidden;
    zoom: 1;
    @property "/h1";
}
    }
</xen:if>
The font size is reduced regardless of screen size, have I missed something obvious out? (18 was the standard I found from xenforo.css)

Thanks,
Dave.
 

Chris D

XenForo developer
Staff member
By changing this bit:
Code:
    @property "h1";
    font-size: 12pt;
    overflow: hidden;
    zoom: 1;
    @property "/h1";
You are actually changing the default value of that style property.

All you need is this:

Code:
    @media (max-width:@maxResponsiveMediumWidth)
    {
        .titleBar h1
       {
           font-size: 12pt;
       }
    }
You will first need to edit the h1 style property back to be its default value of 18pt.

You only need the above. You don't need to define the wide and narrow ones too.
 
Last edited:
Top