• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.4 Smaller title as part of the responsive design?

PVO_Dave

Active member
#1
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
#2
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
#4
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
#5
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: