Stas Petrov Stas Petrov - 1 year ago 142
CSS Question

Bad button positioning

<div class="head-btn wow fadeInLeft">
<a href="#intro" class="btn-primary">Get started</a>
<a href="#intro" class="btn-default">Read more</a>

.head-btn {
margin-bottom: 40px;

.btn-default {
font-size: 16px;
margin: 30px 0 10px;
padding: 15px 30px;
height: 35px;
border-radius: 80px;

But in small sizes its look like that:

enter image description here

Please helpm me with this. Thanks

Answer Source

By default, <a></a> element is inline element, and inline element will wrap by default if its contents overflow. Because the default overflow settings is visible, so your more displays in the next line to Read.

To fix this, add a line white-space:nowrap; to force your btn-default element not to wrap when the contents overflow.

For more about inline element, please refer to .

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download