XF 2.1 I want to center the copyright line on mobile

[beerForo]

Mobile view has left aligned the entire footer.

The issue is, I have used an image right above the "Forum software by..." line which makes it look off (desktop version is centered along with the copyright). Would anyone know how to center this on mobile? Thanks!

 

[bzcomputers]

Add this to extra.less template:

.p-footer-copyright{
    text-align: center !important;
}

 

[beerForo]

Well thanks!

 

[beerForo]

@bzcomputers, I appreciate the code but I want to understand it for the future. Why was this already centered on the full site, but left aligned on small screens? And your code does not target small screens only. So I am not sure how this worked. Thanks

 

[SyTry]

Hello,

Look at app_footer.less. Add this in your EXTRA.less :

@media (max-width: @xf-responsiveMedium) {
   .p-footer-copyright {
        text-align: center;
   }
}

Regards, SyTry

 

[bzcomputers]

@bzcomputers, I appreciate the code but I want to understand it for the future. Why was this already centered on the full site, but left aligned on small screens? And your code does not target small screens only. So I am not sure how this worked. Thanks

CSS/LESS code can override itself in two ways. First way is to place it lower on the flow, for instance:

.p-footer-copyright {
    text-align: center;
}
.p-footer-copyright {
    text-align: left;
}

The code above will align the copyright to the left, since it is lower in the code than the "center" align.


Second, is when you add "!important" to the end it overrides any code further down unless it is also an "!important" associated with it, for instance:

.p-footer-copyright {
    text-align: center !important;
}
.p-footer-copyright {
    text-align: left;
}

The code above will always align the copyright to the center, since "!important" is only applied to the first one (even though it is above additional copyright instructions).

The code below is similar to what is in stock XenForo 2.

.p-footer-copyright {
    text-align: center;
}
@media (max-width: 650px) {
  .p-footer-copyright {
      text-align: left;
  }
}

What the above says is "align the copyright to the center, until the screen size is 650px or smaller then align it to the left". These codes are not right next to each other in the code list in actuality but all that matters is the order in which they are in, which is the left align is below, so it will be applied to all screens 650px or smaller. "@media" queries like the one above can be used used to target device screen sizes, device orientations and device resolutions.

My quick solution to overriding the Xenforo "@media" query applied to the copyright on small screens was just to apply the "!important" that would override it. Since the last CSS/LESS code applied within XenForo 2 is the extra.less template we know anything applied there will be lower in the code list than any stock XenForo code so even if it also has "!important" applied by XenForo earlier, we can still override it with an "!important" applied later in the extra.less template. Also any code without an "@media" reference is like saying "@ media all", it applies to all devices and screen sizes. So, the "!important" override used in this case will override all current or future @media queries XenForo applies to the copyright and you will always have a centered copyright until you remove the code from the extra.less template.

Technically the stock XenForo code looks like what is posted by @SyTry. The "@
@xf-responsiveMedium" is a XenForo set variable that is set at 650px in stock installations.

 

[beerForo]

Thanks for the detailed explanation, helps a lot!