Professional WordPress Plugins and Services. wpDiscuz, WooDiscuz, Advanced Post Pagination
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.
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.
Elvina, I've changed the rank icon for a smaller one, but It's still not good on mobile.
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.
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.
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.
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.
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:
