Archived topic
Comments width on mobile
7 replies · Started by Paul on February 24, 2023
Hi There,
I have a couple of questions regarding the comments section:
1. How can I reduce the left and right padding of the comments form on for mobile? I'm using the following CSS currently:
/* Comments form input */
.wp-block-post-comments-form input[type=submit]
{
line-height: 24px;
background-color: var(--primary-purple) ;
color: var(--white);
font-weight: bold;
padding: 12px 24px;
border-radius: 24px;
border:none;
box-shadow: 5px 5px 0 0 var(--grey-300);
transition: all 0.3s ease;
}2. On mobile within posts with comments on comments, the comments can be sometimes only 2 characters wide. See example in private info.
Cheers!
Hi there,
that comments block is terrible lol
Try adding this CSS:
.wp-block-comments {
padding-left: 20px !important;
}
.wp-block-comment-template ol {
padding-left: 0.125em !important;
}Hi David,
Yes, it's a mess isn't it! :)
Thanks for the CSS which I added and appears fixed in the customiser but not on actual devices - See screengrab link.
Cheers
Can you make sure the Customizer changes were Published and NOT Saved as Draft ?
Hi David,
Just checked and had added and published this:
/* Mobile sapcing - comments block*/
.wp-block-comments {
padding-left: 20px !important;
}
.wp-block-comment-template ol {
padding-left: 0.125em !important;
}EDIT: I also have the following CSS so perhaps over-riding something?
/* Comments reply */
.wp-block-comments {
border-radius: 24px;
background-color: var(--grey-50);
padding: 36px 36px 36px 48px;
font-size: 16px;
}
ol.wp-block-comment-template {
margin-left:0;
}
.wp-block-post-comments-form .comment-form textarea {
border-radius: 24px;
border: 1px;
background-color: var(--white);
}
.wp-block-comments a {
color: var(--grey-500);
box-shadow: none !important;
}
/* Mobile sapcing - comments block*/
.wp-block-comments {
padding-left: 20px !important;
}
.wp-block-comment-template ol {
padding-left: 0.125em !important;
}I don't see the CSS i provided on the front end of your site. ie, the code isn't there. Do you have any cache plugins ? if so can you clear the caches.
Hi David,
Sorry about that a caching plugin had been switched on by another user now disabled and seeing the changes!
Thanks once again and hope you have a great weekend!
Glad to hear its working