1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Custom user group banner alignment

Discussion in 'Styling and Customization Questions' started by Jason M., Jan 4, 2015.

  1. Jason M.

    Jason M. Member

    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:

    Code:
    .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;
    }
    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.
     
  2. Jason M.

    Jason M. Member

    :(

    No ideas?
     
  3. Optic

    Optic 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 :
    Code:
    <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.
     
    Last edited: Jan 10, 2015
  4. DFI

    DFI Active Member

Share This Page