Button not responsive
-
Hello,
I managed to create a “contact us” button on http://www.sgcleanxpert.com
The button layout is good on a PC. But when I shrink the website to mobile version, the button overlaps with the logo. Under the mobile version, the “contact us” button should be placed above the logo but below the social media icons.
In header.php, I place the button between social media icons and the logo.
<div class=”addons”>
<?php if( mfn_opts_get(‘telephone-number’) ): ?><p class=”phone”><i class=”icon-phone”></i><?php mfn_opts_show(‘telephone-number’) ?></p><?php endif; ?>
<?php if( mfn_opts_get(‘header-email’) ): ?><p class=”mail”><i class=”icon-envelope-alt”></i>“><?php mfn_opts_show(‘header-email’) ?></p><?php endif; ?>
<div class=”social”>-
<?php if( mfn_opts_get(‘social-facebook’) ): ?><li class=”facebook”>” title=”Facebook”>F<?php endif; ?>
<?php if( mfn_opts_get(‘social-googleplus’) ): ?><li class=”googleplus”>” title=”Google+”>G<?php endif; ?>
<?php if( mfn_opts_get(‘social-twitter’) ): ?><li class=”twitter”>” title=”Twitter”>L<?php endif; ?>
<?php if( mfn_opts_get(‘social-vimeo’) ): ?><li class=”vimeo”>” title=”Vimeo”>V<?php endif; ?>
<?php if( mfn_opts_get(‘social-youtube’) ): ?><li class=”youtube”>” title=”YouTube”>X<?php endif; ?>
<?php if( mfn_opts_get(‘social-flickr’) ): ?><li class=”flickr”>” title=”Flickr”>N<?php endif; ?>
<?php if( mfn_opts_get(‘social-linkedin’) ): ?><li class=”linked_in”>” title=”LinkedIn”>I<?php endif; ?>
<?php if( mfn_opts_get(‘social-pinterest’) ): ?><li class=”pinterest”>” title=”Pinterest”>:<?php endif; ?>
<?php if( mfn_opts_get(‘social-dribbble’) ): ?><li class=”dribbble”>” title=”Dribbble”>D<?php endif; ?></div>
</div>
<?php echo do_shortcode(‘[maxbutton id=”1″]’); ?>
<!– #logo –>
<?php if( is_front_page() ) echo ‘<h1>’; ?>
” title=”<?php bloginfo( ‘name’ ); ?>”>
<img src=”<?php mfn_opts_show(‘logo-img’,THEME_URI .’/images/logo.png’); ?>” alt=”<?php bloginfo( ‘name’ ); ?>” />
<?php if( is_front_page() ) echo ‘</h1>’; ?>In custom CSS, I added
a.maxbutton-1 {
position: relative !important;
top: 70px;
right: 130px;
}Appreciate if someone can help me to make the button responsive.
Thanks a lot.
The topic ‘Button not responsive’ is closed to new replies.