CODEWITHSUNDEEP
css
MVC newbie
MVC newbie

Reputation: 599

CSS tiles size tweak

i am trying to make my tiles look the same even text inside increase.but it does seems to be able to work even with word property.i want to make the "buy extended warranty" and ""List machines for service pack" to be same as others. Anyone can help? enter image description here

.tile {

width: 100%;
display: inline-block;
box-sizing: border-box;
background: #fff;
padding: 30px;
margin-bottom: 40px;
text-align:center;

}

.tile:hover
{
background:#F8F9F9;
}



    <div class="tab-pane active" id="warranty">
                                    <div class="col-md-4">
                                        <a class="tile" style="background-color:#EBDEF0;" href="#">Show warranty </a>

                                    </div>
                                    <div class="col-md-4">
                                        <a class="tile" style="background-color:#EBDEF0;" href="#">New Warranty</a>

                                    </div>
                                    <div class="col-md-4 ">
                                        <a class="tile" style="background-color:#EBDEF0;" href="#">Delete Warranty</a>

                                    </div>
                                    <div class="col-md-4 ">
                                        <a class="tile " style="background-color:#EBDEF0;" href="#">Enter Invoice</a>

                                    </div>
                                    <div class="col-md-4 ">
                                        <a class="tile" style="background-color:#EBDEF0;" href="#">Enter Serial </a>

                                    </div>
                                    <div class="col-md-4">
                                        <a class="tile" style="background-color:#EBDEF0;" href="#">Buy extended warranty </a>

                                    </div>
                                    <div class="col-md-4 ">
                                        <a class="tile" style="background-color:#EBDEF0;" href="#">List Machines for service pack</a>

                                    </div>
                                </div>

Upvotes: 0

Views: 1017

Answers (1)

disinfor
disinfor

Reputation: 11533

You could use flex-box for this:

css:

.tab-pane {
    display: flex;
    flex-wrap: wrap;
}

.tile {
    width: 100%;
    padding: 30px;
    margin-bottom: 40px;
    text-align: center;
    display: block;
}

.tile:hover {
    background: #F8F9F9 !important;
}

HTML 

<div class="tab-pane active" id="warranty">
    <div class="col-sm-4">
        <a class="tile" style="background-color:#EBDEF0;" href="#">Show warranty </a>

    </div>
    <div class="col-sm-4">
        <a class="tile" style="background-color:#EBDEF0;" href="#">New Warranty</a>

    </div>
    <div class="col-sm-4 ">
        <a class="tile" style="background-color:#EBDEF0;" href="#">Delete Warranty</a>

    </div>
    <div class="col-sm-4 ">
        <a class="tile " style="background-color:#EBDEF0;" href="#">Enter Invoice</a>

    </div>
    <div class="col-sm-4 ">
        <a class="tile" style="background-color:#EBDEF0;" href="#">Enter Serial </a>

    </div>
    <div class="col-sm-4">
        <a class="tile" style="background-color:#EBDEF0;" href="#">Buy extended warranty </a>

    </div>
    <div class="col-sm-4 ">
        <a class="tile" style="background-color:#EBDEF0;" href="#">List Machines for service pack</a>

    </div>
</div>

I adjusted the class on your col-md-4 to col-sm-4 so you could see it in action. I included the bootstrap CDN CSS, as you are using bootstrap class names in your HTML. And I added !important to override your inline color styles on the anchor tags.

Here's the fiddle to see it in action: https://jsfiddle.net/mjqfjbh0/1/

Upvotes: 1

Related Questions