Badges and Rank on Mobile

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.

Dakota Perez

Customer

(@dakotaperez)

Joined: 5 years ago

Member

Posts: 12

Aug 12, 2019 11:32 am

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

@astghik

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

Astghik

Admin

(@astgh)

Joined: 7 years ago

Illustrious Member

Posts: 6152

Aug 12, 2019 11:53 am

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

Could you please check the same page using incognito mode?

Dakota Perez

Customer

(@dakotaperez)

Joined: 5 years ago

Member

Posts: 12

Aug 12, 2019 12:04 pm

@astghik

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

Bastbra

Customer

(@bastbra)

Joined: 6 years ago

Member

Posts: 104

Aug 12, 2019 12:25 pm

It's on all IOS-devices. 🙁

Astghik

Admin

(@astgh)

Joined: 7 years ago

Illustrious Member

Posts: 6152

Aug 12, 2019 12:34 pm

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

Posts: 12

Dakota Perez

Customer

Topic starter

Aug 13, 2019 12:25 am

(@dakotaperez)

Member

Joined: 5 years ago

Any findings?

10 Replies

Astghik

Admin

(@astgh)

Joined: 7 years ago

Illustrious Member

Posts: 6152

Aug 13, 2019 4:52 pm

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

@dakotaperez,

Could you please try the solution mentioned here:

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

Dakota Perez

Customer

(@dakotaperez)

Joined: 5 years ago

Member

Posts: 12

Aug 20, 2019 5:02 am

@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

Astghik

Admin

(@astgh)

Joined: 7 years ago

Illustrious Member

Posts: 6152

Aug 20, 2019 12:54 pm

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.

Dakota Perez

Customer

(@dakotaperez)

Joined: 5 years ago

Member

Posts: 12

Aug 21, 2019 1:08 am

@astghik

It still is displaying oddly on mobile apple devices

Dakota Perez

Customer

(@dakotaperez)

Joined: 5 years ago

Member

Posts: 12

Aug 22, 2019 12:10 am

@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

Astghik

Admin

(@astgh)

Joined: 7 years ago

Illustrious Member

Posts: 6152

Aug 22, 2019 11:38 am

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

Dakota Perez

Customer

(@dakotaperez)

Joined: 5 years ago

Member

Posts: 12

Aug 22, 2019 6:39 pm

@astghik

I did that and the image is still stretching

Dakota Perez

Customer

(@dakotaperez)

Joined: 5 years ago

Member

Posts: 12

Aug 22, 2019 11:31 pm

@astghik

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

Astghik

Admin

(@astgh)

Joined: 7 years ago

Illustrious Member

Posts: 6152

Aug 23, 2019 11:38 am

@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.

Dakota Perez

Customer

(@dakotaperez)

Joined: 5 years ago

Member

Posts: 12

Aug 27, 2019 4:29 am