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

Thanks for any input in advance.

Dave.
 
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.
 
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.
 
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:
Back
Top Bottom