XF 1.2 Responsive Custom Banner Styles

[Ji2myTran]

Hi Guys,

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

/* 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!

 

[Paul B]

It displays exactly the same no matter the browser width.

It does on my site at least.

 

[Ji2myTran]

I was tried to put:

<xen:if is="@enableResponsive">

ABOVE CSS CODES

</xen:if>

in EXTRA.CSS to display it in responsive version, but it is not display correctly.

 

[Ji2myTran]

@Brogan :

Sorry Brogan, i was just edited the CSS code in the #1 Post

 

[Ji2myTran]

To explain more details, plz see both of the displays in mobile and browsers:

Responsive display:



Browser display:



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.

 

[Paul B]

Try adding !important to the border-radius.

I have no border radius on my style at all which is why it doesn't do that.

 

[Ji2myTran]

Yep, it is okay now, thanks Brogan