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..

    how to create Active State in CSS Navigations

    jquery/css how to rescale and crop a large image to fit my display div?

    How to set caption for youtube videos box in css?

    CSS: How to make an input box stretch to the width of its given absolute position left and right value?

    How to make a background-color transition that eventually covers div to center? [closed]

    How to replicate this table layout in HTML4/CSS2 (incl. vert-centered rows)

    How to fix the css red notification bubble

    How to avoid gaps using Isotope with Masonry layout sortby random

    How to apply a property only to the submit button

    How to avoid CSS conflict using jquery?

    How to create a two column layout

    How align div to a form field?

    jQuery: How to add a string to a css property

    CSS: how to make margin: 0px auto work

    How to make my phone number bold using css [closed]

    how to put html inside php code [closed]

    How to get the child of a parent div element

    How to handle an id tag with '.' in CSS

    how to fix customize select box using css?

    how to apply css property to my first div class only

    How to center image while also aligning text to the right of image?

    How do I format tabs in Blueprint CSS?

    how do you center and left align columns, at the same time, in bootstrap or regular html5?

    Showing/hiding elements inside a div block with HTML and CSS

    How to make read more option with html/CSS?

    Html, table, img & css - how to get text to wrap correctly?

    A CSS question: why is the Facebook Share button often styled as “icon” + text to fake as a button, and how to do it well?

    how do I get plus sign in rectangle in css?

    How to hide hr inside the last li using css

    How to use webpack and css-loader to load only specific css class?