Notifications
Clear all

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


secretuser
Posts: 8
Customer
(@secretuser)
Member
Joined: 3 months 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: 697
Moderator
(@elvina)
Honorable Member
Joined: 7 months ago

Hi @secretuser

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

1 Reply
secretuser
Customer
(@secretuser)
Joined: 3 months ago

Member
Posts: 8

@elvina

I've send you a pm

secretuser
Posts: 8
Customer
(@secretuser)
Member
Joined: 3 months ago

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

10 Replies
Elvina
Moderator
(@elvina)
Joined: 7 months ago

Honorable Member
Posts: 697

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

 

secretuser
Customer
(@secretuser)
Joined: 3 months ago

Member
Posts: 8

@elvina

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

Tom
 Tom
Admin
(@tomson)
Joined: 5 years ago

Support Team
Posts: 3117

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

secretuser
Customer
(@secretuser)
Joined: 3 months 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
 Tom
Admin
(@tomson)
Joined: 5 years ago

Support Team
Posts: 3117

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

secretuser
Customer
(@secretuser)
Joined: 3 months ago

Member
Posts: 8

@tomson

desktop good
mobile wrong

 

See attachment

Tom
 Tom
Admin
(@tomson)
Joined: 5 years ago

Support Team
Posts: 3117

Thank you @secretuser

Please, PM me too your website URL.

secretuser
Customer
(@secretuser)
Joined: 3 months ago

Member
Posts: 8

@tomson

I've send you a pm

Tom
 Tom
Admin
(@tomson)
Joined: 5 years ago

Support Team
Posts: 3117

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

 

secretuser
Customer
(@secretuser)
Joined: 3 months ago

Member
Posts: 8

@tomson

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

Share: