Hello again. I noticed that on mobile view the avatars in the comments section of my company's blog are disappearing to conserve space. I would like to keep them from disappearing. I'd like to keep the author name, date, and meta data as-is beside the avatar but center it vertically next to the image and make the comment appear on the next line instead. See the attachment for a representation of what I'm looking for.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Hi. The comment is not where I want it to be when I put in your css code. It still has a left margin when I want the comment to be flush right next to the container div. How do I get it to look like the image I posted in my first post?
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Hello again. I noticed that on mobile view the avatars in the comments section of my company's blog are disappearing to conserve space. I would like to keep them from disappearing. I'd like to keep the author name, date, and meta data as-is beside the avatar but center it vertically next to the image and make the comment appear on the next line instead. See the attachment for a representation of what I'm looking for.
https://advantageits.com/3-digital-marketing-strategies-to-improve-engagements/
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 690px) { .container .comment-list li.comment>div img.avatar { display: inline-block !important; } .container .comment-list li.comment>div { padding-left: 117px !important; } }Thanks
ThemeNectar Support Team
Hi. The comment is not where I want it to be when I put in your css code. It still has a left margin when I want the comment to be flush right next to the container div. How do I get it to look like the image I posted in my first post?
Hey Again,
Use this revised css only.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 690px) { .container .comment-list li.comment>div img.avatar { display: inline-block !important; } .comment-author ,.comment-meta { padding-left: 74px !important; } }Thanks
ThemeNectar Support Team