Bhavin Shah Bhavin Shah - 4 months ago 7
CSS Question

CSS - font is being hidden in button while resizing browser window

CSS

#category{
width: 85%;
height: 65%;
//border: thin darkgray solid;
margin: 0 auto;
margin-top: 2%;
bottom: 0;
}
.interest_categories{

width: 21%;
height: 15%;
border: thin darkgrey solid;
margin-left:10px ;
margin-top: 10px;
float: left;
}

.interest_categories input{
width: 100%;
height: 100%;
font-size: 1em;
text-align: center;
vertical-align: middle;
}


HTML

<div id="category" style="width: 96%; margin-top: 5px; height: 75%; top: 0; border: thin red solid;">
<div class="interest_categories">
<input type="button" id="films" value="Films" style="background: #ffc561; color: white;">
</div>
<div class="interest_categories">
<input type="button" id="music" value="Music" style="color: #a1a1a1; background: white;">
</div>
<div class="interest_categories">
<input type="button" id="dance" value="Dance" style="color: #a1a1a1; background: white;">
</div>
<div class="interest_categories">
<input type="button" id="reading" value="Reading" style="color: #a1a1a1; background: white;">
</div>
<div class="interest_categories">
<input type="button" id="design_art" value="Design & Art" style="color: #a1a1a1; background: white;">
</div>
<div class="interest_categories">
<input type="button" id="photography" value="Photography" style="color: #a1a1a1; background: white;">
</div>
<div class="interest_categories">
<input type="button" id="science" value="Science" style="color: #a1a1a1; background: white;">
</div>
<div class="interest_categories">
<input type="button" id="it" value="IT" style="color: #a1a1a1; background: white;">
</div>
<div class="interest_categories">
<input type="button" id="technology" value="Technology" style="background: #ffc561; color: white;">
</div>
<div class="interest_categories">
<input type="button" id="business" value="Business" style="background: #ffc561; color: white;">
</div>
<div class="interest_categories">
<input type="button" id="entrepreneurship" value="Entrepreneurship" style="color: #a1a1a1; background: white;">
</div>
<div class="interest_categories">
<input type="button" id="sports" value="Sports" style="color: #a1a1a1; background: white;">
</div>
<div class="interest_categories">
<input type="button" id="games" value="Games" style="color: #a1a1a1; background: white;">
</div>
<div class="interest_categories">
<input type="button" id="psychology" value="Psychology" style="color: #a1a1a1; background: white;">
</div>
<div class="interest_categories">
<input type="button" id="humor" value="Humor" style="color: #a1a1a1; background: white;">
</div>
<div class="interest_categories">
<input type="button" id="travel" value="Travel" style="color: #a1a1a1; background: white;">
</div>

<div class="interest_categories">
<input type="button" id="nature" value="Nature" style="color: #a1a1a1; background: white;">
</div>

<div class="interest_categories">
<input type="button" id="food_drink" value="Food & Drink" style="color: #a1a1a1; background: white;">
</div>

<div class="interest_categories">
<input type="button" id="fashion" value="Fashion" style="color: #a1a1a1; background: white;">
</div>

<div class="interest_categories">
<input type="button" id="history" value="History" style="color: #a1a1a1; background: white;">
</div>

</div><!--Category-->


Here it is,
I want my font , not to be hidden even when i resize my window.
when I resize browser window , the fonts are being hidden as shown in image . so i want to do that when I resize my window, then the
categories
should fit properly.

fonts are being hidden in image

Answer

You didn't use Bootstrap actually. You have to divide your every row in four divisions.

3 + 3 + 3 + 3
3 + 3 + 3 + 3
3 + 3 + 3 + 3
3 + 3 + 3 + 3
3 + 3 + 3 + 3

You have not fixed anything in Bootstrap. I have edited your code by Bootstrap. May be it's not 100% of your answer, But I think you will be able to redesign it with your own knowledge.

<div class="container" id="category" style="top: 0; border: thin red solid;">
  <div class="row">
    <div class="row">
            <div class="interest_categories col-md-3">
                <input type="button" id="films" value="Films"  style="background: #ffc561; color: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="music" value="Music"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="dance" value="Dance"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="reading" value="Reading"  style="color: #a1a1a1; background: white;">
            </div>
    </div>


   <div class="row">
            <div class="interest_categories col-md-3">
                <input type="button" id="films" value="Films"  style="background: #ffc561; color: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="music" value="Music"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="dance" value="Dance"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="reading" value="Reading"  style="color: #a1a1a1; background: white;">
            </div>
</div>


<div class="row">
            <div class="interest_categories col-md-3">
                <input type="button" id="films" value="Films"  style="background: #ffc561; color: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="music" value="Music"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="dance" value="Dance"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="reading" value="Reading"  style="color: #a1a1a1; background: white;">
            </div>
</div>

<div class="row">
            <div class="interest_categories col-md-3">
                <input type="button" id="films" value="Films"  style="background: #ffc561; color: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="music" value="Music"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="dance" value="Dance"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="reading" value="Reading"  style="color: #a1a1a1; background: white;">
            </div>
</div>


<div class="row">
            <div class="interest_categories col-md-3">
                <input type="button" id="films" value="Films"  style="background: #ffc561; color: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="music" value="Music"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="dance" value="Dance"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="reading" value="Reading"  style="color: #a1a1a1; background: white;">
            </div>
</div>

     </div>        
</div>

CSS:

 #category{
    //border: thin darkgray solid;
    margin: 0 auto;
    margin-top: 2%;
    bottom: 0;
}
    .interest_categories{

        border: thin darkgrey solid;
        float: left;
    }

    .interest_categories input
    {
        text-align: center;
    }