Haag Haag - 4 months ago 13
HTML Question

Button won't have the same width as the column it's in

Im trying to make my button have the same width as the column it's in. I have succeeded with this before on my website, but this time it just wont work...
The issue is appearing on the following link; http://haagmedia.dk/klf/fanzone.php
The two buttons is in two separate columns, and its both I want to have the full width.
All help is appreciated :)!

HTML

<div class="knap2 row">
<div class="col-lg-4 col-md-4 col-sm-3 col-xs-2"></div>

<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<a href="#" class="fanknap" alt="Fanzone">FANZONE</a>
</div>

<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<a href="#" class="fanknap" alt="Støttemedlem">STØTTEMEDLEM</a>
</div>

<div class="col-lg-4 col-md-4 col-sm-3 col-xs-2"></div>
</div>

</div>


CSS

.fanknap {
background-color: #208AF0;
border: 2px solid #208AF0;
border-radius: 3px 3px 3px 3px;
height: auto;
width: 100%;
text-align: center;
color: #FFF;
font-weight: 700;
font-size: 12px;
}

Answer

You need to add display:block; to your buttons CSS.

Demo: https://jsfiddle.net/iRbouh/fhfhrc78/

Comments