html - Responsive layout for text and button -


how make text , button inside container responsive? try add in @ media table responsive no button , text. here html , css code

<p>welcome linksphere</p> <div id="home-button"> <a class="button1" href="#">fill form</a> <a class="button1" href="#">view results</a> <a class="button1" href="#">admin site</a> </div>  css: p{ text-align:center; font-size:25px; line-height: 150%; margin:-50px 80px 0; } /*home table button*/ #home-button{ text-align: center; margin: 100px 60px 0 0!important; } .button1 { display: inline; text-decoration:none; margin:0 20px; width: 12em; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px;   border-radius: 5px; color: #ffffff; /*words*/ background: #0080ff; font-weight: bold; -webkit-appearance: none; } .button1:hover { /*after pointing*/ cursor: pointer; background: #00407f; color: #ffffff; text-decoration:none; } 

your display: inline declaration why button not filling in full width of content.

if change display: block button grow fill content area it's being wrapped in.


Comments

Popular posts from this blog

How to provide Authorization & Authentication using Asp.net, C#? -

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

How to use Authorization & Authentication in Asp.net, C#? -