Badges and Rank on Mobile  


Dakota Perez
Posts: 12
Customer
(@dakotaperez)
Member
Joined: 2 months 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
18 Replies
Dakota Perez
Posts: 12
Customer
(@dakotaperez)
Member
Joined: 2 months ago

What I am referring to:

https://imgur.com/a/c3rlX7o

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

Support Team
Posts: 3392

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

Support Team
Posts: 3392

@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 months ago

Member
Posts: 12

@astghik

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

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

Member
Posts: 71

@dakotaperez

It's on all IOS-devices. 🙁

8A394D9B 8BFF 41FB B216 0F1AE92685C0

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

Support Team
Posts: 3392

@dakotaperez

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

Reply
Dakota Perez
Posts: 12
Customer
(@dakotaperez)
Member
Joined: 2 months ago

Any findings?

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

Support Team
Posts: 3392

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

Support Team
Posts: 3392

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 months ago

Member
Posts: 12

@astghik

It still is displaying oddly on mobile apple devices 

Reply
Dakota Perez
Customer
(@dakotaperez)
Joined: 2 months 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
(@astghik)
Joined: 2 years ago

Support Team
Posts: 3392

@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 months ago

Member
Posts: 12

@astghik

I did that and the image is still stretching 

Reply
Dakota Perez
Customer
(@dakotaperez)
Joined: 2 months 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
(@astghik)
Joined: 2 years ago

Support Team
Posts: 3392

@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
Dakota Perez
Customer
(@dakotaperez)
Joined: 2 months 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:
Green
Default
Pear
Black Emo
{green}:grinning:
{green}:wink:
{green}:face:
{green}:inlove:
{green}:sweaty:
{green}:surprised:
{green}:lovekiss:
{green}:laugh:
{green}:formalsmile:
{green}:displeased:
{green}:cool:
{green}:resent:
{green}:nerd:
{green}:screaming:
{green}:amazed:
{green}:sad:
{green}:deceitful:
{green}:starryeyes:
{green}:evil:
{green}:shocked:
{green}:tears:
{green}:sulky:
{green}:smile:
{green}:vomited:
{green}:hi:
{green}:afraid:
{green}:crazy:
{green}:rabid:
{green}:fighting:
{green}:nonoise:
{green}:blushed:
{green}:idontknow:
{green}:scared:
{green}:razz:
{green}:kiss:
{green}:eat:
{green}:shutmouth:
{green}:gape:
{green}:suspicious:
{green}:laughingoutloud:
{green}:bruise:
{green}:crying:
{green}:pray:
{green}:serious:
{green}:excitement:
:)
:d
:wink:
:mrgreen:
:neutral:
:twisted:
:arrow:
:shock:
:???:
:cool:
:evil:
:oops:
:razz:
:roll:
:cry:
:eek:
:lol:
:mad:
:sad:
:!:
:?:
:idea:
:hmm:
:beg:
:whew:
:chuckle:
:silly:
:envy:
:shutmouth:
{pear}:happy:
{pear}:smile:
{pear}:laugh:
{pear}:laughingoutloud:
{pear}:crying:
{pear}:exhausted:
{pear}:nerd:
{pear}:surprised:
{pear}:veryhungry:
{pear}:wink:
{blackemo}:laughtertotears:
{blackemo}:gift:
{blackemo}:love:
{blackemo}:inlove:
{blackemo}:shamefaced:
{blackemo}:heart:
{blackemo}:crazy:
{blackemo}:anguished:
{blackemo}:bruise:
{blackemo}:easymoney:
{blackemo}:exhausted:
{blackemo}:vampire:
{blackemo}:shutmouth:
{blackemo}:wink:
{blackemo}:carnival:
{blackemo}:flowers:
{blackemo}:hotdrink:
{blackemo}:party: