Looking to display Name, Email and Website fields on the left and Comment textarea and Submit button on the right in your Oxygen site?

CSS Grid to the rescue.

Step 1

Enable the visibility of labels in the comment form.

Step 2

Add the following CSS:

@media only screen and (min-width: 769px) {

    .comment-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 30px;
    }

    .comment-notes {
        grid-column: 1 / -1;
    }

    .comment-form-comment {
        grid-column: 2 / 3;
        grid-row: 2 / 4;
    }

    .oxy-comment-form .comment-form > p.comment-notes {
        margin-bottom: 40px;
    }

    .comment-form-url {
      align-self: end;
    }

    .oxy-comment-form .comment-form .comment-form-url {
        margin-bottom: 0;
    }

    .oxy-comment-form .comment-form input {
        border: 1px solid #ddd;
    }

    .oxy-comment-form input#submit.submit {
        font-size: 16px;
    }
}

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: