1. 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?

Discussion in 'XenForo Questions and Support' started by PVO_Dave, Oct 20, 2014.

  1. PVO_Dave

    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.
     
  2. Brogan

    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.
     
  3. PVO_Dave

    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? :)
     
  4. PVO_Dave

    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.
     
  5. Chris D

    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: Oct 20, 2014
  6. PVO_Dave

    PVO_Dave Active Member

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

Share This Page