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

XF 1.2 Responsive Custom Banner Styles

#1
Hi Guys,

I'm using these custom CSS class names for the banner styles:

Code:
/* User group banners */
.userBanner {margin-left: 0 !important; margin-right: 0 !important;}
.userBanner.wrapped span.after, .userBanner.wrapped span.before {display: none;}

.admin-rank {
  background: none #ea8b8b;
  border: 1px solid #b54b4b;
  padding: 2px 0 2px 0;
  color: white;
  text-shadow: 0 0 1px #500f0f;
  text-align: center;
  font-size: 11px;
  border-radius: 0;}

 .member-rank {
  background: none rgb(249, 249, 249);
  border: 1px solid #888;
  padding: 2px 0 2px 0;
  color: #333333;
  text-shadow: 0 0 1px rgb(249, 249, 249);
  text-align: center;
  font-size: 11px;
  border-radius: 0;} 
.supermod-rank {
  background: none #00adff;
  border: 1px solid #176093;
  padding: 2px 0 2px 0;
  color: #ffffff;
  text-shadow: 0 0 1px #a1d9ef;
  text-align: center;
  font-size: 11px;
  border-radius: 0;} 
.vip-rank {
  background: none #c68ae2;
  border: 1px solid #9862b2;
  padding: 0 5px;
  color: white;
  text-shadow: 0 0 1px #500f0f;
  text-align: center;
  font-size: 11px;
  border-radius: 0;}
How can display it in responsive version with the same style? I mean what exactly responsive codes that i should put in extra CSS?

Thanks!
 
Last edited:
#3
I was tried to put:

Code:
<xen:if is="@enableResponsive">

ABOVE CSS CODES

</xen:if>
in EXTRA.CSS to display it in responsive version, but it is not display correctly.
 
#5
To explain more details, plz see both of the displays in mobile and browsers:

Responsive display:

responsive-display.jpg

Browser display:

broswers-display.jpg

Actually, not much different but i didn't put any border-top-left-radius and border-top-right-radius in the codes, but seems it has something to do with responsive version.