Question

.0I have a problem aligning the labels to the input fields with a mobile device (normal browser does not have any problem with that).

What I have:

<div data-role="fieldcontain">
    <label for="name">Label:</label> 
    <input data-mini="true" type="text" name="name" id="name" value="" />
</div>

In my head I have a media query like

<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0">

Example, what I have:

Label

---

What I want to have under a 450px i.e.:

Label ________

The label (according to the media queries in the css) moves to the left side of the input field if the width is over 450px. This works like a charm in my local browser. But if I access this with any mobile device regardless of the resolution(tries s3, iphone and other devices) the label gets always displayed on top of the textfield(in non landscape mode).

I would like to understand why this behavior occurs on a mobile device. Does this have sth. to do with the viewport? Im not familiar developing on mobile devices and their specific media queries.

I fully aware that there are workarounds like grids and tables. But I would like to have this behavior for my web app. It makes sense on smaller devices that its getting displayed in 2 lines. I would like to do it without overriding jquery mobile classes and writing my own solution if there is a way.

Thanks in advance!

Answer 1

css file:

jquery.mobile-1.2.0.min.css

edit:

3227.line: @media all and (min-width:300px) {