Custom user group banner alignment

First post, please forgive if this is in the wrong place.

Using the posts in this discussion I have managed to add a custom banner, however I need help re-sizing/re-locating the banner when viewed from a mobile device. As you can see from the screen shots, the banner is way too big and not positioned properly in the mobile view. Using Splash Style from pixel exit if that is important. This is the code I added to Extra.CSS:

background: url("@imagePath/xenforo/blank-gold-banner.png")

  width: 200px;
  height: 30px;
  color: transparent;
  display: block;

.messageUserBlock .blank-gold-banner
    margin-left: -16px !important;
banner test.PNG
Everything looks great here.

banner test mobile.png

When viewed from mobile, the banner is behind the avatar and way too big. Any help would be appreciated.


Well-known member
On mobile devices that wide, maxResponsiveNarrowWidth will kick in. So just apply the same change you made to your user banner to it.

Without a link to your forum I cannot test to see if this works, but try something like this in EXTRA.CSS :
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth) {
      margin-left: -16px !important;
Brogan has a great guide on how the Responsive Design works.
Last edited: