Notifications
Clear all

[Solved] Problems with Pointsm Ranks and Badges (myCred)

14 Posts
3 Users
0 Likes
1,126 Views
Posts: 8
Customer
Topic starter
(@secretuser)
Member
Joined: 4 years ago

Hello,

I just bought the myCred - wpdiscuz integration from you. The plugin works fine on PC (see screenshot).

But on mobile, it has problems with the Points and Ranks/Badges.

 

pc
mobile

I hope you can fix this problem as soon as possible.

If you want my websitelink for troubleshooting, i can send you an email or pm. I don't want to publish my website url in public. Now I turned off the integration because it doesn't work well.

Thanks.

13 Replies
Elvina
Posts: 1403
(@elvina)
Support
Joined: 5 years ago

Hi @secretuser

Could you please leave the example URL to pm message, to allow us to check it.

1 Reply
Customer
(@secretuser)
Joined: 4 years ago

Member
Posts: 8

@elvina

I've send you a pm

Posts: 8
Customer
Topic starter
(@secretuser)
Member
Joined: 4 years ago

Elvina, I've changed the rank icon for a smaller one, but It's still not good on mobile. 

10 Replies
Elvina
(@elvina)
Joined: 5 years ago

Support
Posts: 1403

@secretuser

Sorry for the late response.

Please navigate to Dashboard > Comments > Settings > Styling admin page, put the following CSS code in "Custom CSS code" textarea:

#wpcomm .wpdiscuz-mycred-rank-wrap {
margin: 10px 4px 6px 21px !important;
}

#wpcomm .wpdiscuz-mycred-points-wrap {
margin: 5px 4px !important;
}
#wpcomm .wc-comment .wc-comment-left {
display: flex;
flex-direction: column;
}

Please don't forget to delete all caches and press CTRL+F5(twice) on the frontend before checking.

 

Customer
(@secretuser)
Joined: 4 years ago

Member
Posts: 8

@elvina

I did what you asked, but still the same problem. 

 Tom
Admin
(@tomson)
Joined: 9 years ago

Famed Member
Posts: 4168

@secretuser

You will not be able to see the change in your mobile browsers. Because Mobile Browsers have a very hard cache. You should find a way to reset those cache, or simply use a private session tab to check the change. Please open a browser in your mobile, switch to private session and check it again. This will not use old cache and you'll be able to see the affection of CSS code.

Customer
(@secretuser)
Joined: 4 years ago

Member
Posts: 8

@tomson

I know what cache is, but thanks anyway for explaining. I've tried on several browsers, on 3 phones, I install a new browser what I didn't use, still the same problem.

 Tom
Admin
(@tomson)
Joined: 9 years ago

Famed Member
Posts: 4168

@secretuser

Could you please explain again what exactly you're trying to achieve? What is the problem? I see badges and points under the avatar, this is made by design.

Customer
(@secretuser)
Joined: 4 years ago

Member
Posts: 8

@tomson

desktop good
mobile wrong

 

See attachment

 Tom
Admin
(@tomson)
Joined: 9 years ago

Famed Member
Posts: 4168

Thank you @secretuser

Please, PM me too your website URL.

Customer
(@secretuser)
Joined: 4 years ago

Member
Posts: 8

@tomson

I've send you a pm

 Tom
Admin
(@tomson)
Joined: 9 years ago

Famed Member
Posts: 4168

Ok, @secretuser,

here is a CSS code which can fix the view but it can't do what exactly you want. Please put this CSS code in Dashboard > Comments > Settings > Styles > Custom CSS Code textarea. Save it, delete all caches and check it in a new private browser tab:


@media screen and (max-width:460px){
     #wpcomm #wcThreadWrapper .wc-comment .wc-comment-left .avatar {width: 40px !important;height: 40px !important;margin: 0 5px 0 10px !important;float: none !important;display: block !important;}
     #wpcomm #wcThreadWrapper .wpdiscuz-mycred-rank-wrap {margin: 10px 0 !important;text-align: center!important;padding: 0 10px 0 0 !important;}
     #wpcomm #wcThreadWrapper .wc-comment .wc-comment-left {display: block!important;}
     #wpcomm #wcThreadWrapper .wc-comment .wc-comment-left {float: left!important;width: auto!important;margin-right: 25px!important;}
    #wpcomm #wcThreadWrapper .wc-comment-author {padding-left: 0!important;}
     #wpcomm #wcThreadWrapper .wc-reply.wc-comment .wc-comment-left .avatar {width: 40px !important;height: 40px !important;margin: 4px 3px 2px 3px !important;margin: 10px 5px 0 10px !important;}
    #wpcomm #wcThreadWrapper .wc-reply .wc-comment-author {padding: 3px 0px 2px 0!important;}
}

 

This is the maximum adaptation I can provide you. Using this CSS code your comments mobile view will look like this:

2020 01 26 0937

 

Customer
(@secretuser)
Joined: 4 years ago

Member
Posts: 8

@tomson

Thanks Tom! It worked. I can live with this. Have a great day. Bye.

Share:
Scroll to top