HTML: How to change the width of input field based on container size

Tags: jquery,html,css,asp.net

Problem :

I have one Asp.net form in that I have two took Containers. In one container I have inserted some paragraph values and in other container i have put Registration page element.

No my registration page has labels and textfields. I want to align textfield to right of the label when page width is greater than 1024 and if page size is less than 1024 then i want that text field below to the label.

How to make change in css for that. Please help to resolve this. I am uploading the image so that you can better understand me.

Here you can see when I open my website to my mobile it shows me like this. I just want to set Input Field below the Labels when screen size is less than 1024.

Thanks.

---

Solution :

You can use @media to adjust to different screen widths:

@media (min-width:1025px){
    input{
        display:inline-block;
    }
}
@media (max-width:1024px){
    input{
        display:block;
    }
}

<label for="name">Name:</label><input type="text" name="name"/>

JSFiddle Demo (Resize result pane)