JQuery mobile phone button size?

Question

I am trying to make all of these buttons the same size, two of them are larger due to the text.

Is this possible with CSS?

Answer 1

If this is a jQuery Mobile question, you can resize the button by changing this class:

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

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

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

Now, when you use the tag buttons (I do this from your previous question), you will need to specify its own identifier or class. If you change only .ui-btn, you will change every button inside your application. So at 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/