html - How to center content in footer -
html - How to center content in footer -
i building website using wordpress theme. have 2 elements (one floated left, sec floated right) in footer. need create centered (the sec 1 below first one) when resize browser window. tried giving <p> , <div> tag class , style float:none; - hovewer cann check didn't work on webpage. attach image of how want be..
webpage
<div class="site-info"> <div style="margin:0 auto; width: 75%;"> <p style="float:left;">© copyright <?= date('y'); ?> hotel Švýcarský dům</p> <div style="float:right;">naleznete nás na sociálních sítích: <a style="display: block; float:right; margin:-4px 0 0 5px;" href=""><img src="/wp-content/themes/adamos/images/gplus.png" /></a> <a style="display: block; float:right; margin:-4px 5px 0 5px;" href=""><img src="/wp-content/themes/adamos/images/facebook.png" /></a> </div> <div class="clear"></div> </div> </div><!-- .site-info -->
here updated code. screen less 600px, divs go on top of each other. need tweaking fit on site.
class="snippet-code-css lang-css prettyprint-override">#left { float: left; } #right { float: right; } #center { text-align: center; } #container { margin-left: 12.5%; margin-right: 12.5%; } .imagefloat { display: block; float: right; margin: -4px 5px 0 5px; } @media (max-width: 600px) { .nofloat { width: 100%!important; text-align: center; float: none!important; } .imagefloat { float: none!important; } } class="snippet-code-html lang-html prettyprint-override"><div class="site-info"> <div id="container"> <div id="left" class="nofloat">© copyright <?=d ate( 'y'); ?>hotel Švýcarský dům</div> <div id="right" class="nofloat"> <a class="imagefloat" href=""> <img src="/wp-content/themes/adamos/images/gplus.png" /> </a> <a class="imagefloat" href=""> <img src="/wp-content/themes/adamos/images/facebook.png" /> </a> </div> <div id="center">naleznete nás na sociálních sítích:</div> <div class="clear"></div> </div> </div>
html css wordpress responsive-design media-queries
Comments
Post a Comment