XF 1.4 Smaller title as part of the responsive design?

[PVO_Dave]

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.



Thanks for any input in advance.

Dave.

 

[Paul B]

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]

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

 

[PVO_Dave]

Hi @Brogan

As expected

I added this to extra.css

/* 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]

By changing this bit:

    @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:

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

 

[PVO_Dave]

Many thanks @Chris D and @Brogan

I must have edited the xenforo.css by accident, I thought I'd just copied it

All working as expected now, thanks