Question

Hello there I am developing a jQuery mobile site,

My problem in regard to the presentation of my red buttons, it seems that the width of the ‘home’ and ‘products’ buttons in the header is dictated by the text inside of them. This means that one button appears thinner than the other. Is there a way to set the buttons to an equal consistent width? I would like to achieve a consistent button width in the header.

Perhaps I am using the wrong HTML attributes for the buttons?

<div data-role="header" data-theme="c" class="mainNav">
                <a href="index.php" id="headerLogo" data-role="none"><span class="logo"></span></a>
                    <div class="ui-btn-right menuBtn">
                        <a data-role="button" href="index.php" data-icon="home" data-iconpos="top">Home</a>
                        <a data-role="button" href="products.php" data-icon="settings" data-iconpos="top">Products</a>
                    </div>
</div> 

My mobile website is here:
http://www.test-bed.co.uk/mobile/index.php

The documentation for jQuery mobile buttons is here:

http://jquerymobile.com/demos/1.2.0-pre/docs/buttons/index.html

Answer 1

Your best bet would be to edit the CSS theme you’re using with JQuery Mobile so you get consistent button sizes on all pages. If you don’t feel comfortable doing that just make them the same class and set the width in your provided CSS page

class mobi-button {
   display: inline-block;
   width: 32px;
   height: 46px;
}

This has been discussed before, next time be sure to search before you ask. Might save yourself some time!