[Resolved] Comment area fileds inline

[Denis]

I want to put comment fields (author, email, url) inline.

I’ve read this thread https://generatepress.com/forums/topic/modify-comment-area-layout/ but I don’t know how to apply the code to 3 fields.

What’s the proper CSS to do this? Thanks.

[Tom]

Hi there,

Sorry for not getting back to you sooner!

Adding this should be enough:

@media (min-width: 769px) {
    .comment-form #author, 
    .comment-form #email {
        width: 48%;
        float: left;
    }

    .comment-form #email {
        float: right;
    }

    .comment-form #url {
        width: 100%;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Denis]

Thanks for reply, however I asked how to put 3 fields on a single line, thanks

[Tom]

Ah, try this:

@media (min-width: 769px) {
    .comment-form #author, 
    .comment-form #email,
    .comment-form #url {
        width: 32.5%;
        float: left;
    }

    .comment-form #author {
        margin-right: 1%;
    }

    .comment-form #url {
        margin-left: 1%;
    }
}

[Denis]

That works but I want to add margins between fields
Desired result looks like

Thanks

[Tom]

Just edited the code above 🙂

[Denis]

Thanks again!
Almost perfect, apart of Google reCaptcha overlay

[Tom]

Can you link me to that page?

[Denis]

DELETED

[Tom]

Try this:

.g-recaptcha {
    clear: both;
}

[Denis]

That works! Thank you

[Denis]

resolved

[Tom]

You’re welcome 🙂

[Author]

Posts