wpDiscuz - WordPress Comment Plugin
Position of bubble ...
 
Share:
Notifications
Clear all

Position of bubble on tablet & mobile

Page 1 / 2

vavw
Posts: 8
 vavw
Topic starter
(@vavw)
Active Member
Joined: 1 year ago

Hi,

Just installed your great plugin, very pleased to see what it can do.

I did run into a cosmetic issue. With the position of the bubble set to bottom right, it display correctly on my laptop. However, on both my phone (iPhone 8S) and on my tablet (12" iPad Pro) in portrait orientation, the bubble is at bottom left with the number of comments detached from the bubble and displayed at bottom center of the page. Also, the <<invite to comment>> message is displayed outside of the page, off-screen towards the left.

On the iPad, all is fine in landscape orientation, but not so on the phone.

Looking forward to your next update, cheers,

 

Victor

12 Replies
Asti
Posts: 3567
 Asti
Support
(@asti)
Support member
Joined: 4 years ago

Hi @vavw,

Could you please leave your website URL to allow us to debug the CSS conflict? 

Reply
vavw
Posts: 8
 vavw
Topic starter
(@vavw)
Active Member
Joined: 1 year ago

https://clearskies.eu/blog/backyard/25may20/

Give the page a few seconds to load, as it contains a table at the bottom.

And feel free to leave a comment 😉

Reply
1 Reply
Asti
 Asti
Support
(@asti)
Joined: 4 years ago

Support member
Posts: 3567

@vavw,

We've found another issue on your website. One of the plugins (we guess some security plugin) you're using doesn't allow the guests to leave a comment. In our case, we've also not able to post comments. 

I've recorded a video please watch it and you'll see the js errors caused by the plugin: https://www.screencast.com/t/mcqXwhwKi

Please deactivate the plugins and check (comment as a guest) after each deactivation to find the problem maker plugin: 

Reply
vavw
Posts: 8
 vavw
Topic starter
(@vavw)
Active Member
Joined: 1 year ago

That is an interesting one, as I myself can comment as a guest, from both my home connection and cellular. I guess this is not a plugin issue but perhaps a regional one?

Reply
vavw
Posts: 8
 vavw
Topic starter
(@vavw)
Active Member
Joined: 1 year ago

Your test comment worked this time.

Reply
1 Reply
Asti
 Asti
Support
(@asti)
Joined: 4 years ago

Support member
Posts: 3567

@vavw,

yes, it was blocked by countries. No such a problem anymore. Please wait a bit. We'll try to find some CSS solution for the main issue you've mentioned soon. 

Reply
vavw
Posts: 8
 vavw
Topic starter
(@vavw)
Active Member
Joined: 1 year ago

Many thanks! Can't believe so many features of your plugin are free.

Reply
1 Reply
Asti
 Asti
Support
(@asti)
Joined: 4 years ago

Support member
Posts: 3567

@vavw,

Please navigate to Dashboard > wpDiscuz > Settings > Styles & Colors admin page, put the CSS codes in the  "Custom CSS Code" textarea, save, it delete all caches and chgeck again, the issue should be solved:

@media screen and (max-width: 1024px){
#wpd-bubble-wrapper {
left: unset !important;
}
#wpd-bubble-wrapper.wpd-right-corner > #wpd-bubble #wpd-bubble-add-message::before {
left: 290px;
}
#wpd-bubble-wrapper.wpd-right-corner > #wpd-bubble #wpd-bubble-add-message {
left: -300px;
}
}

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
vavw
Posts: 8
 vavw
Topic starter
(@vavw)
Active Member
Joined: 1 year ago

That's a good fix for the balloon's positioning, but the <<invite to comment>> box needs a nudge towards the left (on 1024px and narrower screens).

Reply
1 Reply
Asti
 Asti
Support
(@asti)
Joined: 4 years ago

Support member
Posts: 3567

@vavw,

This will be fixed in the next update. Currently, you can use this CSS codes:

@media screen and (max-width: 1024px){
#wpd-bubble-wrapper.wpd-right-corner > #wpd-bubble #wpd-bubble-add-message {
left: -228px;
}
#wpd-bubble-wrapper.wpd-right-corner > #wpd-bubble #wpd-bubble-add-message::before {
left: 219px;
}
#wpd-bubble-wrapper > #wpd-bubble #wpd-bubble-add-message {
width: 220px;
}
}
Reply
Page 1 / 2
Share: