Setting maximum width for content in jQuery Mobile?

Question

I have a jQuery Mobile webpage which currently has a width=device-width but my form elements (textfields and the submit button) stretch to the width of the browser when viewed on a desktop computer.

Is there any way to set a maximum width so that these elements (or the whole content div) display properly on mobile devices but don't exceed a fixed maximum width when viewed on desktop computers?

Answer 1

    <style type='text/css'>
    <!--
        html { background-color: #333; }
        @media only screen and (min-width: 600px){
            .ui-page {
                width: 600px !important;
                margin: 0 auto !important;
                position: relative !important;
                border-right: 5px #666 outset !important;
                border-left: 5px #666 outset !important;
            }
        }
    -->
    </style>

The @media only screen and (min-width: 600px) restricts the CSS rule to desktop devices with a minimum window width of 600px. For these the width of the page container created by jQuery Mobile is fixed to 600px, margin: 0 auto centers the page. The rest improves the result aesthetically.

However, ther is one drawback: this doesn't really play well with the sliding animation. I suggest to disable the animation (maybe also depending on the media type and screen size using @media), because it looks just weird on a big screen anyways.

Answer 2

@media only screen and (min-width: 800px){
        body { 
            background:transparent !important; 
            overflow:hidden !important;
        }
        html {
            background: #fff;
            background-attachment: fixed;
            overflow:hidden !important;         
         }
        .ui-page {
            width: 340px !important;
            border:60px solid #111 !important;
            margin: 50px auto !important;
            position: relative !important;
            border-right: 20px #222 outset !important;
            border-left: 20px #000 outset !important;
            border-radius:25px;
            -webkit-border-radius:25px;
            -moz-border-radius:25px;
            overflow-y:scroll !important;
            min-height:600px !important;
            height:600px !important;
            max-height:600px !important;
            padding-bottom:0px;
        }

    }