CODEWITHSUNDEEP
jqueryhtmlcssasp.net
Developer
Developer

Reputation: 1435

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

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.

Problem with webpage in smartphone browser

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.

Upvotes: 0

Views: 2766

Answers (2)

Shaban Khan
Shaban Khan

Reputation: 156

HTML

<label>this is lable</label>
<div class="text">
    <input type="text"/>
</div>

CSS

label{
    float:left;
}
.text{
    overflow:hidden;
    padding:0 0 0 20px;
}
.text input{
    width:100%;
    box-sizing:border-box;
    padding:5px 15px;
}
@media only screen and (max-width: 1024px) {
    label{
        display:block;
    }
    .text{
        clear:both;
        padding:0;
    }
}

Demo

Upvotes: 0

Jacob G
Jacob G

Reputation: 14172

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)

Upvotes: 1

Related Questions