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.

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.



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)


    CSS Howto..

    Google font - how to specific font-family If they have the same name?

    How to add font awesome in CSS

    CSS - Superfish, how to float 4th level of dropdown

    How can I override inline styles with external CSS?

    how to get fixed table columns width

    How to enable auto indentation in lists and list items?

    how can i add the on hover effect on hyperlink in jeditorpane using swing in java

    How to set one CSS rule for two tags?

    How to change pseudo class property?

    How to use easeOutBounce animiation on display block?

    how to prevent child element from widening parent element's width in css

    How Does CSS Opacity Work When Adding Class?

    CSS: how to make two sections at the same line?

    jquery: how to change properties of whole css-class? [duplicate]

    how you can change the style of the page without changing CSS files?

    How to add a second slideshow on the same webpage

    How to stack smaller text in CSS?

    How to override a css !important property using jQuery with transitions

    How Can I Make An Odd Shaped Icon into a “Circle”?

    CSS to keep middle image in 100% width slideshow always in center

    HTML and CSS: How to lay out a div tag with width:100% and left:300px

    Problems with jQuery Image Slideshow / Rotating Banner using timeout / interval

    How do you change the theme and colors of Site.Master in ASP.NET / C#?

    How to fade multiple background colors after few seconds? [duplicate]

    How to put Facebook and Twitter buttons next to each other?

    Jquery/CSS, how to have and access multiple (left) panels, while adjusting main content container automatically

    How to force the border color of a cell in a html table

    How to change html td background colour through Javascript?

    How to use CSS with JS [duplicate]

    Adding buttons to slideshow