Notifications
Clear all

Flag icon not in line with the others in mobile

8 Posts
2 Users
0 Likes
909 Views
Posts: 5
Topic starter
(@seatsfordeparture)
Active Member
Joined: 4 years ago

 

5D2F759B 2B76 45D6 A104 928AC9867AE1

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.

 

7 Replies
Posts: 5
Topic starter
(@seatsfordeparture)
Active Member
Joined: 4 years ago

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?

Reply
3 Replies
Astghik
Admin
(@astgh)
Joined: 6 years ago

Illustrious Member
Posts: 5860

@seatsfordeparture,

We've checked on different devices and don't find such an issue. Please see the screenshots below:

Screenshot 2020 07 02 11 47 18 027 com.android.browser
Screenshot 2020 07 02 11 48 46 1808235499

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. 

Reply
(@seatsfordeparture)
Joined: 4 years ago

Active Member
Posts: 5

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

Reply
Astghik
Admin
(@astgh)
Joined: 6 years ago

Illustrious Member
Posts: 5860

@seatsfordeparture,

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.

Reply
Posts: 5
Topic starter
(@seatsfordeparture)
Active Member
Joined: 4 years ago

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. 

1A1C2B47 9DBA 4DA7 B4A2 39DC9CCD5A13
Reply
1 Reply
Astghik
Admin
(@astgh)
Joined: 6 years ago

Illustrious Member
Posts: 5860

@seatsfordeparture,

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;
}
}
Reply
Posts: 5
Topic starter
(@seatsfordeparture)
Active Member
Joined: 4 years ago
p

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.

pp

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.

Reply
Share:
Scroll to top