0

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 enter image description here

closed as off-topic by Sally CJ, Krzysiek Dróżdż, Jacob Peattie, Howdy_McGee Feb 22 at 5:56

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

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;
} 
  • Hi Brada, there was no improvement on button appearance on smaller device. – Avinash Patel Feb 18 at 16:56
  • Hi... I looked into your website and saw that you added float: left and float:right, that will cause the container to not calculate the height of the float contents. – Brada Feb 18 at 17:15
  • you need to add .question-content-text{ overflow:hidden;} if you want to use floats – Brada Feb 18 at 17:17
  • I updated my answer, don't forget to add a wrapper around those buttons, you don't have one. – Brada Feb 18 at 17:25
  • Thanks Brada, i tried your new code also but still it is not looking good on small screen. you can see it here ibb.co/cNh1f0G ow i am giving up this idea to keep two buttons over there. Thanks for all your time. – Avinash Patel Feb 18 at 17:57

Not the answer you're looking for? Browse other questions tagged or ask your own question.