Custom user group banner alignment

[Jason M.]

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:

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

no-repeat;
  width: 200px;
  height: 30px;
  color: transparent;
  display: block;
}


.messageUserBlock .blank-gold-banner
{
    margin-left: -16px !important;
}

Everything looks great here.



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

 

[Jason M.]

No ideas?

 

[Optic]

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) {
   .userBanner
   {
      margin-left: -16px !important;
   }
}
</xen:if>

Brogan has a great guide on how the Responsive Design works.

 

[DFI]

Hi @Optic ,

In UI.X theme my user banners are distorted, can you pls help. This is how they are looking

http://imgur.com/tozKGhY