Databases
StackOverflow2013
Postsdbo
POResponsive Design of Form Elements
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POResponsive Design of Form Elements
    text
    copied!<p>I am learning Responsive design of web pages. During the learning I have created a basic page sections and it is looking fine but web form elements are not responding properly to Browser resizing. Here is the code I have written:</p> <pre><code> &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Term&lt;/title&gt; &lt;link rel="stylesheet" href="reset.css" type="text/css"/&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt; &lt;style&gt; body { font-size:1em; text-align: center; } #header { height: 5em; background:#e2ebc3; max-width:1300px; } #mainContent { width: 69%; max-width:900px; min-width:300px; float: left; background:#F2F5F4; position: relative; } #sideContentWrapper { max-width:400px; min-width:150px; width: 30%; float: left; margin-right:0.5em; } #sideContent { margin-left: 1em; min-height: 20em; background:#F4F2F5; } label { float: left; width: 6em; text-align: left; } #frmterm { padding: 2em; width: 90%; max-width:800px; position: relative; } /* form elemnts are not working properly. Do I need the below css? */ #frmterm fieldset,#frmterm fieldset legend, #frmterm fieldset ol, #frmterm fieldset li {width: 100%;} #frmterm, li { text-align: left; margin-bottom: 1.5em; width: 100%; } #frmterm input { width: 80%; } #frmterm textarea { width: 80%; height:200%; display: block; } #frmterm fieldset:nth-child(2) { text-align: center; } @media screen and (max-width:800px) and (min-width:540px) { /* Tablets */ #sideContentWrapper { min-width:150px; width: 30%; float: right; margin-right:0.25em; } #sideContent { margin-left: 0.5em; min-height: 20em; background:#999; /* marker */ } } @media screen and (max-width:540px) { /* Smartphone */ #frmterm, li {margin-bottom: 0.5em;} #sideContentWrapper { display:none; } #mainContent { width: 100%; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="header"&gt;Header&lt;/div&gt; &lt;div id="mainContent"&gt; &lt;form action="" id="frmterm"&gt; &lt;fieldset&gt; &lt;legend&gt; &lt;ol&gt; &lt;li&gt;&lt;label for="terms"&gt;Term:&lt;/label&gt;&lt;input id="terms" type="text" value="" /&gt;&lt;/li&gt; &lt;li&gt;&lt;label for="summary"&gt;Summary:&lt;/label&gt;&lt;input id="summary" type="text" value="" /&gt;&lt;/li&gt; &lt;li&gt;&lt;label for="category"&gt;Category:&lt;/label&gt;&lt;textarea id="category" &gt;&lt;/textarea&gt;&lt;/li&gt; &lt;/ol&gt; &lt;/legend&gt; &lt;/fieldset&gt; &lt;fieldset&gt; &lt;button type="submit"&gt;Submit&lt;/button&gt; &lt;/fieldset&gt; &lt;/form&gt; &lt;/div&gt; &lt;div id="sideContentWrapper"&gt; &lt;div id="sideContent"&gt; Side Content &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <ul> <li><strong>Example resolution where problem can be visible</strong>:</li> </ul> <p>At 980*1280, form elements are touching sidebar, whereas I have given 80% width to form elements. To report this, I have used Responsive Design View of Firefox.</p> <ul> <li><p>The below code has helped a little in above problem:</p> <pre><code>#frmterm fieldset,#frmterm fieldset legend, #frmterm fieldset ol, #frmterm fieldset li {width: 100%;} </code></pre> <p>but I am not sure why I need to mention it in CSS.</p></li> <li><p>I am not much interested on HTML betterment until and unless that is mandatory. I am learning it so I am learning it one by one. I want to correct it using CSS. If possible please provide, important CSS considerations for Form elements in responsive design.</p></li> <li><p>Also, Do I need Viewport Meta Tag. I see no benefits in my web page when I resize webpage on Laptop browser.</p></li> </ul>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload