Professional WordPress Plugins and Services. wpDiscuz, WooDiscuz, Advanced Post Pagination
Hi guys I'll go straight to the point. When I see my website on my phone the flag icon is not on the same line as the other ones. And those are not in line with the name either. Is there a way I can make all the icons in line with the name of the commenter please? I'll attach a screenshot so you can get the idea.
The time, the ONLINE badge, the info icon, the flag icon and the number or the comment are all messed up. Can I get help to make them nice and tidy plsss?
We've checked on different devices and don't find such an issue. Please see the screenshots below:
Please delete all caches and check on incognito mode. If you still see the issue please let us know on which devices you see the issue.
@astghik Hi I am using an iPhone 7. Maybe it's because my device's screen is smaller than the device you tried it. Regardless I would like to interface to be clean even when see with smaller devices .
Try this CSS code:
@media screen and (max-width: 800px){
#wpdcom .wou-status-offline, #wpdcom .wou-status-online {
margin-bottom: 0;
}
#wpdcom span i{
font-size: 8px !important;
}
#wpdcom .wpd-comment-header .wpd-comment-link span {
margin-left: 5px;
}
}
Please don't forget to delete all caches before checking.
Also, please try on incognito mode if you're checking on mobile devices. Because mobile browsers have a hard cache, you'll not be able to see the change immediately.
I think I can notice some changes but as you can see the flag icon is still under the other ones. The online badge is off site too being too high.
Basically I want everything on the same line and on the same font size too.
The commenter name, the online badge, the date and time and all icons like flag, author info, comment number, sticky ecc should be ALL on the same line. No icon should be higher or lower. I wanna go with a really simple look.
Sorry if I may be too specific but as a graphic designer this stuff triggers me 😀 and plus I am quite a perfectionist.
Could you please try this CSS code:
@media screen and (max-width: 800px){
#wpdcom .wou-status-offline, #wpdcom .wou-status-online {
margin-bottom: 0
}
.wpd-comment-author.wcai-uname-info.wcai-not-clicked {
display: flex;
}
.wpd-comment-header {
display: flex;
}
}
I've tried it but on desktop some icons do not start from the same line of pixels as you can see from the screenshot.
from mobile it still looks messy.
the flag icon still goes under the others. The offline badge font goes a bit upwards. The font date is smaller but I reckon it's on the same line and the icons on the left are still messed up.