-
Posts
-
Hello Support,
is it possible to put the comment text under the avatar of the commenter.
By default the avatar is on the left und the comment text on the right. But on Smartphones – especially with a lot of sub-comments – this is very space consuming and makes the comments hard to read.
The URL is: https://www.videospielgeschichten.de/mea-culpa-kingdom-come-deliverance/
Kind regards
AndreHey Andre,
To align the comment gravator in responsive mode please add the below CSS
@media only screen and (max-width: 360px) { #top .comment_content { margin: 0; padding: 0; } #top .gravatar { float: none; margin-bottom: 20px; }}The result will be as shown below
You may not see the changes until the cached files are cleared in your browser.
Please try disabling the CSS merging in Enfold > performance options and hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload” and review the site again.
Also, if a caching plugin is installed please check the plugin settings and empty the cache.
Best regards,
VinayHello Vinay,
that’s wonderful!
Thank you very much for this very helpful customisation.
A few more things:
– Would it additionally be possible to put the name and the time stamp on the right side of the avatar to save some space in vertical?
– Also it would be helpful to minimize the indenting of sub-comments. Is it possible to have a smaller indent?
– And why is the margin of the comment (only on mobile view) on the right side bigger than of the left side?
Kind regards
AndreHi,
Thanks for the update.
Add these css codes to implement the changes above.
#top .comment_content { position: relative; overflow: visible; } #top .comment-header { position: absolute; left: 80px; top: -70px; } #top .commentlist ul { margin: 0 0 0 34px; } .sidebar_right .comment_container { padding-right: 0; }The last css declaration above should remove the padding or space at the right side of the comment container.
Best regards,
IsmaelHi Ismael,
just wonderful! That looks very good.
The last declaration.sidebar_right .comment_container { padding-right: 0; }solves the problem in the mobile (Smartphone) view only. In the normal view it’s not ok, cause the text is now running against the border (thin line) on the right side. Is it possible to scope this declaration only on the mobile view?
Kind regards and thank you very much!
AndreAlso I discovered a little problem when replying to a given comment. In that case the formula gets scrambled.
You can see it here: https://www.videospielgeschichten.de/mea-culpa-kingdom-come-deliverance/#comments while clicking on REPLY.Hi,
What do you mean by “formula”? We should wrap the last css declaration inside a css media so that it will only affect the mobile view.
@media only screen and (max-width: 767px) { .sidebar_right .comment_container { padding-right: 0; } }Best regards,
IsmaelHello Ismael,
thank you.
Regarding the formular: when i want to reply on an existing comment, the formular is broken. Please try to reply on a comment here: https://www.videospielgeschichten.de/mea-culpa-kingdom-come-deliverance/#comments
Thanks for any hint!
AndreHi Andre,
I was able to reply to a comment
What do you mean the form is broken? Can you please explain a bit more?
Best regards,
VictoriaHi Victoria,
sorry for the confusion. I meant broken in terms of style/CSS.
It’s been fixed within this issue: https://kriesi.at/support/topic/comment-form-broken/
Thank you very much for your reply!
Andre
- You must be logged in to reply to this topic.