0

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.

Improve this question

2 Answers 2

Reset to default
1

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)

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Hey if I apply @media query to labels it will not work. Is there any property to put input field below the label when screen size is small?
Oops, just add it to the input
Please check my image so you can better understand my problem. Thanks
I still don't really understand, you want the input under the label, this does that, doesn't it?
even I don't understand the problem. But this is not working in my case.
|
0

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

Improve this answer

6 Comments

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.
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; } }
<label>this is lable</label><div class="text"><input type="text"></div>
Check my edit. Answer in this format. There is an option to edit answer, you should include code there instead in comments. :)
Please check my image so you can better understand my problem. Thanks
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.