jQuery Mobile Button Size?

Question

I'm trying to make all these buttons the same size, two are bigger because of the text.

Is this possible using the CSS?

Answer 1

If this is a jQuery Mobile question then button size can be changed by changing this class:

.ui-btn {
    width: 200px !important;
}

!important is necessary with jQuery Mobile because we need to override default values.

Working example: http://jsfiddle.net/Gajotres/NJ8q4/

Now because you are using a tag buttons (I so it from your previous question) you will need to give it a custom id or class. If you change just .ui-btn you will change every button inside your app. So in the end this CSS will work with this HTML:

HTML :

<a data-role="button" class="custom-btn">Level 5</a>
<a data-role="button" class="custom-btn">Level 4</a>
<a data-role="button" class="custom-btn">Level 3</a>
<a data-role="button" class="custom-btn">Level 2</a>
<a data-role="button" class="custom-btn">Level 1</a>                
<a data-role="button" class="custom-btn">Stretch</a>
<a data-role="button" class="custom-btn">Warm up</a>   

CSS :

.custom-btn {
    width: 200px !important;
}

Second working example: http://jsfiddle.net/Gajotres/NJ8q4/1/