[Resolved] Comments width on mobile

[Paul]

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!

[David]

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;
}

[Paul]

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

[David]

Can you make sure the Customizer changes were Published and NOT Saved as Draft ?

[Paul]

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;
}

[David]

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.

[Paul]

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!

[David]

Glad to hear its working

[Author]

Posts