如何根据容器更改元素的宽度？

Question

Hi in my website I have one container with Registration form elements. Now I want to change the size of labels, Text fields and button based on the container size.

My requirement is The textboxes should be on the right of the labels (and expand up to 40px before the right border of the grey container - 40px is the container's padding anyway) when the width of the screen is >=1024px . If the width of the screen is <1024, the textboxes should be under the labels and their width should be as long as that of the grey container minus the container's padding on the left and on the right side.

Please suggest me the way to do this.

I have also attached a screenshot:

Here background with grey color is the container in website.

.dnnForm .dnnFormItem {
    clear: both;
    width: 100%;
    display: block;
    position: relative;
    text-align: left;
}
@media screen and (min-width: 1025px)
    #rox-custom-box-06 .dnnForm {
        width: 100%;
    }
@media screen and (min-width: 1025px)
    #rox-custom-box-06 .dnnFormInput, .password-strength-container, .password-strength {
        display: inline-block;
        width: 35% !important;
    }

Answer 1

To accomplish this you are going to need to think a bit more granular in nature with your solution.

The Container &/or form will need to have specific CSS classes applied so that you can then make things work. You might also look at using Bootstrap or similar in your skin to assist as it looks like you are trying to make a responsive design, but without having any supporting framework.

Otherwise, a more detailed example with your HTML could assist.