CODEWITHSUNDEEP
javascripthtmlbootstrap-4
Timppa
Timppa

Reputation: 363

Disable Bootstrap from a custom button

How can I disable the Bootstrap from resizing my button inside of a div element. It is an order button and it gets almost invisible if used in mobile device.

It is actually an a tag with an img inside of it.

Here's the following script:

<div class="buttonImage" style="color:green" style="font-size: 2">
    <a href="transaction.html?totalprice=3000">
        <img src="img/orderbutton.png" width="15%" height="15%" onmouseover="this.src='img/orderbuttonhover.png'" onmouseout="this.src='img/orderbutton.png'" alt="OrderButton"/>
    </a>
    <label class="cash">3000 Points</label>
</div>

Is there any suggestion to not resize this button? My div element will not be resized, but the buttons will instead. And also, the most left button resizes first before the middle and right button (there are 3 divs horizontally, 6 divs vertically).

Upvotes: 1

Views: 114

Answers (1)

li x
li x

Reputation: 4061

Remove width="15%" height="15%" and add the class of img-responsive and apply mobile classes to the parent div for mobile screen's. 

<div class='col-lg-2 col-xs-12'>
    <div class="buttonImage" style="color:green" style="font-size: 2">
        <a href="transaction.html?totalprice=3000">
            <img class='img-responsive' src="img/orderbutton.png" alt="OrderButton"/>
        </a>
        <label class="cash">3000 Points</label>
    </div>
</div>

This format will ensure that when your viewing the block from anything that is smaller than desktop at two columns it will get the max width so it's not tiny.

Upvotes: 1

Related Questions