php – Responsive Button for Mobile

Question

i’m wondering the best way to make these two buttons start on a new line within the header while on mobile. Previously it was just the one button “request a quote” however needed to add one. Obviously on mobile that’s pushed on top of the logo shown in the pictures below.
desktop view

and how it’s shown on mobile.

mobile view

Idealy the buttons would be on a new line in the header for only mobile view. Here is the HTML and css code.

<section class="section logo-container">
    <div class="container">
        <div class="columns is-mobile align-middle">
            <div class="column is-half logo">
                <?php if ( has_custom_logo() ) { ?>
                    <?php the_custom_logo(); ?>
                <?php } else { ?>
                    <a href="<?php echo get_site_url(); ?>" title="<?php echo get_bloginfo( 'name' ); ?>">
                        <?php echo get_bloginfo( 'name' ); ?>
                    </a>
                <?php } ?>
            </div>
            <div class="column align-right is-half logo-right-area">
                <ul>
                    <?php if ( !class_exists( 'woocommerce' ) ) { ?>
                        <li>
                            <?php if( is_page_template('templates/right-sidebar-renew-commercial.php') ) { ?>
                            <a href="<?php echo get_site_url(); ?>/commercial/commercial-request-a-quote/" class="button header-button" title="Request a Quote">
                                <span>Request a Quote</span>
                            </a>
                            <?php }else{ ?>
                            <a href="<?php echo get_site_url(); ?>/gos-eco/#gos-eco-form" class="button header-button" title="Qualify for Free Boiler">
                                <span>Qualify for Free Boiler</span>
                            </a>
                            <a href="<?php echo get_site_url(); ?>/request-a-quote/#request-a-quote" class="button header-button" title="Request a Quote">
                                <span>Request a Quote</span>
                            </a>
                            <?php } ?>
                        </li>
                    <?php } else { ?>
                        <li>
                            <a href="<?php echo get_site_url(); ?>/my-account/" title="My Account">
                                <i class="ion-person"></i>
                            </a>
                        </li>

and the css

.header-button {
color: white;
font-size: 0.8667rem;
border-radius: 50px;
padding: 1.5rem 1.5rem;
font-weight: 600;
background: #f58027;
background: -moz-linear-gradient(-45deg, #f58027 0%, #ec222c 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, #f58027), color-stop(100%, 
#ec222c));
background: -webkit-linear-gradient(-45deg, #f58027 0%, #ec222c 100%);
background: -o-linear-gradient(-45deg, #f58027 0%, #ec222c 100%);
background: -ms-linear-gradient(-45deg, #f58027 0%, #ec222c 100%);
background: linear-gradient(135deg, #f58027 0%, #ec222c 100%);
transition: all 300ms ease-in-out; }
.header-button:hover {
color: white;
background: #231F20; }

Many thanks.

0
ikee99 6 months 2021-06-10T04:24:05-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse