Comments width on mobile – GeneratePress

This topic has 7 replies, 2 voices, and was last updated 3 years, 2 months ago by David.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
February 24, 2023 at 2:57 am #2545198
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!
February 24, 2023 at 3:54 am #2545271
David
Staff
Customer Support
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;
}
```
February 24, 2023 at 4:48 am #2545336

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

February 24, 2023 at 5:43 am #2545395

David
Staff
Customer Support

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

February 24, 2023 at 6:07 am #2545429
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;
}
```
February 24, 2023 at 6:53 am #2545481

David
Staff
Customer Support

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.

February 24, 2023 at 9:41 am #2545779

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!

February 25, 2023 at 3:10 am #2546320

David
Staff
Customer Support

Glad to hear its working
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

[Resolved] Comments width on mobile

Popular Articles

[Resolved] Comments width on mobile

Popular Articles

Start building better websites today.