Search code examples
asp.netcssmedia-queries

stack controls on mobile view


Viewing from a desktop my label and two textbox controls are aligned horizontally. However when the user views the site on mobile I would like the textboxes to stack on top of each other. I am using a media query to adjust to a mobile view. All the other lines stack fine (with the textbox under the label) The problem with the address is that I have two textboxes, I would like one on each line. Any suggestions? Any questions let me know thanks

Current CSS

.row { clear: none; width: 100%; overflow: hidden; margin: 5px 0; } 
.label { float: left; text-align: right; margin-right: 10px; width: 130px;} 
.value { float: left; text-align: left;} 

html

<div class="row"> 
    <div class="label"> 
            <asp:Label ID="lblSiteAddress" runat="server" Text="Site Address"></asp:Label>
     </div>
     <div id="value"> 
            <asp:TextBox ID="txtSiteAddress" runat="server" Width="192px" Height="22px"></asp:TextBox>
            <asp:TextBox ID="txtSiteAddress2" runat="server" Width="192px" Height="22px"></asp:TextBox>![enter image description here][1]
     </div> 
</div > 

Solution

  • Try this:

    .value input[type='text'] {
        display: block;
        clear: both;
        /* Additional style here */
    }