i learning responsive design of web pages. during learning have created basic page sections , looking fine web form elements not responding browser resizing. here code have written:
<!doctype html> <html> <head> <title>term</title> <link rel="stylesheet" href="reset.css" type="text/css"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <style> 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 not working properly. need 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 , (max-width:800px) , (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 , (max-width:540px) { /* smartphone */ #frmterm, li {margin-bottom: 0.5em;} #sidecontentwrapper { display:none; } #maincontent { width: 100%; } </style> </head> <body> <div id="header">header</div> <div id="maincontent"> <form action="" id="frmterm"> <fieldset> <legend> <ol> <li><label for="terms">term:</label><input id="terms" type="text" value="" /></li> <li><label for="summary">summary:</label><input id="summary" type="text" value="" /></li> <li><label for="category">category:</label><textarea id="category" ></textarea></li> </ol> </legend> </fieldset> <fieldset> <button type="submit">submit</button> </fieldset> </form> </div> <div id="sidecontentwrapper"> <div id="sidecontent"> side content </div> </div> </body> </html> - example resolution problem can visible:
at 980*1280, form elements touching sidebar, whereas have given 80% width form elements. report this, have used responsive design view of firefox.
the below code has helped little in above problem:
#frmterm fieldset,#frmterm fieldset legend, #frmterm fieldset ol, #frmterm fieldset li {width: 100%;}but not sure why need mention in css.
i not interested on html betterment until , unless mandatory. learning learning 1 one. want correct using css. if possible please provide, important css considerations form elements in responsive design.
also, need viewport meta tag. see no benefits in web page when resize webpage on laptop browser.
here css solution may or may not work you:
original: http://jsfiddle.net/brandonbabb/jnpbm/
modified: http://jsfiddle.net/brandonbabb/gm8fp/
i added comments in css , did not change html.
i recommend people not use em values unless need to. ems hard interpret unless have lot of experience working them, less intuitive percent values @ first glance.
remember add following code whenever using ems:
html {font-size: 100%} also, viewport tag mobile devices.
Comments
Post a Comment