php - How to align buttons properly

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 6 years ago.

Improve this question

I am using below code on my function.php file to display two buttons.

function action_after_question_content() {
    if (!is_single()) {
        echo "<a class='button-default' href='".get_the_permalink()."#respond'>See Answer</a>";
        echo "<a class='meta-answer' href='".get_the_permalink()."#comments'>Give Answer</a>";
    }
}

This is working fine but those buttons alignment is not coming properly as you can see on small screen. May I know how can we create different class/div so that they appear smaller and align properly.

Thanks, Avinash

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 6 years ago.

Improve this question

I am using below code on my function.php file to display two buttons.

function action_after_question_content() {
    if (!is_single()) {
        echo "<a class='button-default' href='".get_the_permalink()."#respond'>See Answer</a>";
        echo "<a class='meta-answer' href='".get_the_permalink()."#comments'>Give Answer</a>";
    }
}

This is working fine but those buttons alignment is not coming properly as you can see on small screen. May I know how can we create different class/div so that they appear smaller and align properly.

Thanks, Avinash

• php

Share Improve this question asked Feb 17, 2019 at 6:07 Avinash PatelAvinash Patel 3988 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

first things first lets improve your code:

function action_after_question_content() {
    if (!is_single()) {
        echo "<a class='button-default' href='".esc_url( get_the_permalink() )."#comments'>See Answers</a>";
        echo "<a class='meta-answer' href='".esc_url( get_the_permalink() )."#respond'>Give Answer</a>";
    }
}

Note: We can improve further by getting the numbers of comments, and based on that build the buttons: Ex: If we have a plural numbers of comments we will use "See Answers", if we have one, we will use "See Answer", If we have none, we can display something like "Be the first who answers!"

This will look like:

function action_after_question_content() {
    if (!is_single()) {
        $num_comments = get_comments_number();
        if ( $num_comments ) :
            echo '<a class="button-default btn-puzzle-align" href="' . esc_url( get_the_permalink() ) . '#comments">' . _n( 'See Answer', 'See Answers', $num_comments, 'textdomain' ) . '</a>';
            echo '<a class="meta-answer btn-puzzle-align" href="' . esc_url( get_the_permalink() ) . '#respond">' . __( 'Give Answer', 'textdomain' ) . '</a>';
        else :
            echo '<a class="meta-answer btn-puzzle-align" href="' . esc_url( get_the_permalink() ) . '#respond">' . __( 'Be the first to answer!', 'textdomain' ) . '</a>';
        endif;
    }
}

Where in CSS should look like:

.btn-puzzle-align {
   margin-bottom: 2.5rem;
}

This is just a guessing, the margin-bot could not work but could work depending on the others elements CSS. The code is also untested. Note that you need to change the textdomain to the theme textdomain, and the 2.5rem to what you might need.

Edit:

Also, after writing this, a more good way of doing this is maybe to wrap the buttons in another element:

function action_after_question_content() {
    if (!is_single()) {
        $num_comments = get_comments_number();
        echo '<div class="btn-puzzle-align">';
            if ( $num_comments ) :
                echo '<a class="ap-see" href="' . esc_url( get_the_permalink() ) . '#comments">' . _n( 'See Answer', 'See Answers', $num_comments, 'textdomain' ) . '</a>';
                echo '<a class="ap-give" href="' . esc_url( get_the_permalink() ) . '#respond">' . __( 'Give Answer', 'textdomain' ) . '</a>';
            else :
                echo '<a class="ap-see" href="' . esc_url( get_the_permalink() ) . '#respond">' . __( 'Be the first to answer!', 'textdomain' ) . '</a>';
            endif;
        echo '</div>';
    }
}

And use the padding, which will usually work.

.btn-puzzle-align {
   display: flex;
   justify-content: space-evenly;
   padding-bottom: 2.5rem;
}
.btn-puzzle-align > .ap-see, .btn-puzzle-align > .ap-give{
    float:none;
}