Badges and Rank on Mobile  


Dakota Perez
Posts: 11
Customer
(@dakotaperez)
Member
Joined: 2 weeks 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? 

Topic Tags
16 Replies
Dakota Perez
Posts: 11
Customer
(@dakotaperez)
Member
Joined: 2 weeks ago

What I am referring to:

https://imgur.com/a/c3rlX7o

Reply
6 Replies
Astghik
Admin
(@astghik)
Joined: 2 years ago

Support Team
Posts: 3119

@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
Dakota Perez
Customer
(@dakotaperez)
Joined: 2 weeks ago

Member
Posts: 11

@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
(@astghik)
Joined: 2 years ago

Support Team
Posts: 3119

@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
Dakota Perez
Customer
(@dakotaperez)
Joined: 2 weeks ago

Member
Posts: 11

@astghik

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

Reply
Bastbra
Customer
(@bastbra)
Joined: 7 months ago

Member
Posts: 58

@dakotaperez

It's on all IOS-devices. 🙁

8A394D9B 8BFF 41FB B216 0F1AE92685C0

Reply
Astghik
Admin
(@astghik)
Joined: 2 years ago

Support Team
Posts: 3119

@dakotaperez

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

Reply
Dakota Perez
Posts: 11
Customer
(@dakotaperez)
Member
Joined: 2 weeks ago

Any findings?

Reply
8 Replies
Astghik
Admin
(@astghik)
Joined: 2 years ago

Support Team
Posts: 3119

@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
Dakota Perez
Customer
(@dakotaperez)
Joined: 2 weeks ago

Member
Posts: 11

@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
(@astghik)
Joined: 2 years ago

Support Team
Posts: 3119

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
Dakota Perez
Customer
(@dakotaperez)
Joined: 2 weeks ago

Member
Posts: 11

@astghik

It still is displaying oddly on mobile apple devices 

Reply
Dakota Perez
Customer
(@dakotaperez)
Joined: 2 weeks ago

Member
Posts: 11

@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
(@astghik)
Joined: 2 years ago

Support Team
Posts: 3119

@dakotaperez

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

Reply
Dakota Perez
Customer
(@dakotaperez)
Joined: 2 weeks ago

Member
Posts: 11

@astghik

I did that and the image is still stretching 

Reply
Dakota Perez
Customer
(@dakotaperez)
Joined: 2 weeks ago

Member
Posts: 11

@astghik

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

Reply
Share: