Notifications
Clear all

[Solved] Possible to make rank icons smaller in mobile view?

5 Posts
2 Users
2 Reactions
933 Views
Posts: 53
Customer
Topic starter
(@chris-r)
Member
Joined: 5 years ago

Hello, 

 

The rank icon size in desktop mode looks great, but in mobile view the icons are a little big for the screen size.  Is it possible to make them smaller in mobile view with some css?  

 

Thank you, 

-Chris

4 Replies
Astghik
Posts: 6199
Admin
(@astgh)
Illustrious Member
Joined: 7 years ago

Hi @chris-r,

Sure it's possible, just leave some example URL to allow us to provide a CSS solution for you. 

3 Replies
Customer
(@chris-r)
Joined: 5 years ago

Member
Posts: 53

@astghik

 

Thanks for getting back to me!  I sent you the link via messages on here. 

 

Thanks again!

 

-Chris

 

Astghik
Admin
(@astgh)
Joined: 7 years ago

Illustrious Member
Posts: 6199

@chris-r,

Please try the following CSS code:

@media screen and (max-width: 800px){
#wpforo-wrap .wpforo-mycred-rank-wrap img.mycred-rank {
width: 99px;
height: auto;
}
}

The red marked code can be changed as you want.

The CSS code should be added in the "Custom CSS code" textarea, located in the Dashboard > Forums > Settings > Style Tab.  

Please don't forget to delete all caches before checking. Also, mobile browsers have a hard cache, you'll not be able to see the change immediately, so please check it on incognito mode.  

 

Customer
(@chris-r)
Joined: 5 years ago

Member
Posts: 53

@astghik

 

Thank you so much!  That code worked perfectly!  

 

Thanks again and take care, 

-Chris

 

Share:
Scroll to top