Notifications
Clear all

Badges and Rank on Mobile

19 Posts
3 Users
2 Reactions
2,051 Views
Posts: 12
Customer
Topic starter
(@dakotaperez)
Member
Joined: 5 years ago

Hello my rank icons are displaying very weird on my mobile version of my forum, it appears to be stretched out a ton any way to fix this? 

18 Replies
Posts: 12
Customer
Topic starter
(@dakotaperez)
Member
Joined: 5 years ago

What I am referring to:

https://imgur.com/a/c3rlX7o

Reply
6 Replies
Astghik
Admin
(@astgh)
Joined: 7 years ago

Illustrious Member
Posts: 6198

@dakotaperez

Thank you for contacting us.

This is a CSS conflict with the theme or other plugins. Please leave some example URL to allow us to check it and provide CSS solution for you. 

Reply
Customer
(@dakotaperez)
Joined: 5 years ago

Member
Posts: 12

@astghik

https://trashhat.com/forum/trash-hat-films-discussions/asdasdas/

 

it shows here when you view on a tablet or cell phone! 

Reply
Astghik
Admin
(@astgh)
Joined: 7 years ago

Illustrious Member
Posts: 6198

@dakotaperez

we've checked on 3 different devices and don't find such issue. Please see the screenshots below. 

image1
image2

Could you please check the same page using incognito mode? 

Reply
Customer
(@dakotaperez)
Joined: 5 years ago

Member
Posts: 12

@astghik

it may be an ios issue, I still see it on my apple devices

Reply
Customer
(@bastbra)
Joined: 6 years ago

Member
Posts: 104

@dakotaperez

It's on all IOS-devices. 🙁

8A394D9B 8BFF 41FB B216 0F1AE92685C0
Reply
Astghik
Admin
(@astgh)
Joined: 7 years ago

Illustrious Member
Posts: 6198

@dakotaperez

Let me check the issue. I'll back to you asap. 

Reply
Posts: 12
Customer
Topic starter
(@dakotaperez)
Member
Joined: 5 years ago

Any findings?

Reply
10 Replies
Astghik
Admin
(@astgh)
Joined: 7 years ago

Illustrious Member
Posts: 6198

@dakotaperez,

Could you please try the solution mentioned here:

https://stackoverflow.com/questions/8889261/width-100-not-working-on-ios

The code should be added in the active theme's files:

<meta name="viewport" content="width=device-width,initial-scale=1" />

https://wordpress.stackexchange.com/questions/267871/meta-tag-viewport

Reply
Customer
(@dakotaperez)
Joined: 5 years ago

Member
Posts: 12

@astghik

any way to do this but using just css or adding to my functions file? id rather not alter my theme files as of now 

Reply
Astghik
Admin
(@astgh)
Joined: 7 years ago

Illustrious Member
Posts: 6198

ok @dakotaperez,

Could you please try the following code. Please put it in Dashboard > Forums > Settings > Styles > "Custom CSS code" textarea. 

#wpforo-wrap img.mycred-badge-image, img.mycred-rank {
height: 100% !important;
}

Please don't forget to delete all caches and check it on incognito mode.

Reply
Customer
(@dakotaperez)
Joined: 5 years ago

Member
Posts: 12

@astghik

It still is displaying oddly on mobile apple devices 

Reply
Customer
(@dakotaperez)
Joined: 5 years ago

Member
Posts: 12

@astghik

Should I add it to additional css section of my theme settings? adding it to thj forum styles page did not fix my issue

Reply
Astghik
Admin
(@astgh)
Joined: 7 years ago

Illustrious Member
Posts: 6198

@dakotaperez

I don't think it'll help. Could you please change the badge image (just for teting) and check again? 

Reply
Customer
(@dakotaperez)
Joined: 5 years ago

Member
Posts: 12

@astghik

I did that and the image is still stretching 

Reply
Customer
(@dakotaperez)
Joined: 5 years ago

Member
Posts: 12

@astghik

Will turn off rank display for now until I can find a solution, not really sure what is going wrong here

Reply
Astghik
Admin
(@astgh)
Joined: 7 years ago

Illustrious Member
Posts: 6198

@dakotaperez,

Could you please send the admin login details to info[at]gvectrs.com email address to allow us to check it?

Please enable the Ranks before sending the accesses. 

 

Reply
Customer
(@dakotaperez)
Joined: 5 years ago

Member
Posts: 12

@astghik

My boss does not allow this unfortunately, is there any more info or screenshots or anything I can provide to help with getting this issue fixed?

Reply
Share:
Scroll to top