[Resolved] How to Edit Text

[Sourabh]

HI,

how to edit this text from the comment section –

Save my name, email, and website in this browser for the next time I comment & Leave a Comment text??

And in the comment section Name and email fields are in two-row, so let me know can we set the same in one row instead of two (Like snapshot).

[Leo]

Hi there,

This is coming from WordPress. Take a look at this article:
https://www.webfulcreations.com/remove-or-edit-save-my-name-email-and-website-in-this-browser-for-the-next-time-i-comment/

Hope this helps.

[Sourabh]

Seems fine, What about the second query ??

And in the comment section Name and email fields are in two-row, so let me know can we set the same in one row instead of two (Like snapshot). In Desktop version only..

[Ying]

Give this CSS a try:

@media (min-width: 1025px) {
.single-post form#commentform {
    display: flex;
    flex-wrap: wrap;
}
.single-post p.comment-form-comment, .single-post .comment-form-cookies-consent {
    width: 100%;
}
.single-post input#email {
    margin-left: 20px;
}
}

[Sourabh]

It’s not working… nothing changes on the desktop, however destroying the mobile version even.

[Elvin]

Hi there,

Ying’s CSS should’ve worked to some extent.

You can try this:

@media (min-width: 1025px) {
    .single-post form#commentform {
        display: flex;
        flex-wrap: wrap;
    }

    .single-post p.comment-form-comment, .single-post .comment-form-cookies-consent {
        width: 100%;
    }

    .single-post input#email {
        margin-left: 10px;
    }

    input#author, input#email {
        flex: 1 1 auto;
    }
}

@media (max-width: 1024px) {
    .single-post form#commentform {
        display: flex;
        flex-direction: column;
    }
    
    .single-post input#email {
        margin-left: 0px;
    }

    input#author, input#email {
        flex: 1 1 100%;
    }
}

Here’s the CSS being tested on your site –

[Sourabh]

Unfortunately, it’s just a fixed-mobile issue, but no change in desktop (Snapshot attached).

[David]

All of those methods should work.
But the only CSS you should require is this which will inline the two fields on Desktop only:

@media(min-width: 768px) {
    .comment-form {
        display: flex;
        flex-wrap: wrap;
    }

    .comment-form>* {
        flex: 1 0 100%;
    }

    .comment-form #author,
    .comment-form #email {
        flex: 1 0 calc(50% - 5px);
    }

    .comment-form #author {
        margin-right: 10px;
    }
}

If its not working then its probably because you have added it after some CSS that is broken, eg. a missing } on a media query. Add the CSS to very top of your CSS to test it and eliminate the chance you have added it inside another media query.

[Sourabh]

But the only CSS you should require is this which will inline the two fields on Desktop only:

Sorry, I forgot to mention the tab version also, Lol (My Fault Sorry), Only the mobile version can have two lines due to the small screen size.

Yes, you are correct its don’t work, might be due to some broken CSS (because when posted on top, it seems fine), I have fixed broken CSS, and it’s working fine (but not for tab version).

How to apply it on the tab also??

[David]

Depends what code you have used.
The Media Query is what defines the size screen it appears on.
In my code i had this:

@media(min-width: 768px)

Which means it will apply to Tablets and Destkop.

[Sourabh]

I am using given by you, I trust you since starting…and always…

Anyways, Leo gave me this link above –

https://www.webfulcreations.com/remove-or-edit-save-my-name-email-and-website-in-this-browser-for-the-next-time-i-comment/

I made the changes accordingly and working, Only thing that was not found in para to change the first text which was “Leave a Comment” (More in the snapshot), which line I should edit for this text???

[Leo]

Try this filter:
https://docs.generatepress.com/article/generate_leave_comment/

[Sourabh]

It’s fine but size issues are visible as this becomes normal heading in the tab and mobile version , how to fix it??

checked through browser tool and seems it’s due to this CSS –

@media (max-width: 768px)
body.single h3 {
font-size: 16px;
}

but if I change it another part will affect so how to make the size big for a specific title ??

[David]

The comments title has its own class of comments-title
So you can target that class specifically:

.comments-title {
    font-size: 20px;
}

But – you have this CSS:

@media (max-width: 768px) {
    body.single h2 {
        font-size: 22px !important;
    }

    body.single h3 {
        font-size: 16px !important;
    }
}

So you will need to make the comments-title more specific ie.

body.single h3.comments-title {
    font-size: 20px !important;
}

[Sourabh]

NOt working, refer to (snapshot).

[Author]

Posts