css - How to make same website layout for mobile devices (not responsive) -
i've tired finding answer of question. want website can seen same mobile or similar device. don't mean responsive rather mean, mobile visitor can see same layout of website horizontal mouse scrolling. possible every website. not need code that. same layout seen mobile horizontal mouse scrolling. but, i've troubled 1 scenario. i've built example. here it..
if see website mobile or similar device small notebook etc(or resizing small browser), you'll see this: 
you're seeing blue div can't able fill 100% width of browser though div defined 100% width! grey div below portion of images. @ normal stage both blue(div.top) , grey(div#gcontent) div center of browser @ small screen, grey div fill 100% width blue div has failed fill 100% width. what's reason. how can fix it?
structure of it:
<body> <!-- top start --> <div class="outer top"> <div class="inner"> <div class="nav"> <p>lorem ipsum dummy text .... of lorem ipsum.</p> </div> </div> </div> <!-- top end --> <!-- wrapper start --> <div class="wrapper"> <!-- header start --> <div id="header"> <div class="logo"> <a href="index.html"><img src="images/logo.png" width="124" height="104" alt="logo" /></a> </div> <h1>welcome</h1> </div> <!-- header end --> <!-- content start --> <div id="content"> <p>lorem ipsum dummy text ... of lorem ipsum.</p> <p>lorem ipsum dummy text ... of lorem ipsum.</p> <p>lorem ipsum dummy text ... of lorem ipsum.</p> </div> <!-- content end --> </div> <!-- wrapper end --> </body> css:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0 none; font-size: 100%; margin: 0; padding: 0; vertical-align: baseline; } { text-decoration: none; color: #fff; } .clear { clear: both; } body { background: url(../images/bg.png) repeat-x #fff; color: #000; font-family: helvetica, myriad pro, verdana; font-size: 14px; line-height: 1em; } .outer { width: 100%; float: left; display: block; } .top { background: #009999; } .inner { width: 940px; margin: 0 auto; } .wrapper { width: 940px; margin: 0 auto; text-align: left; } #header { width: 100%; float: left; } h1 { font-weight: normal; } h2 { font-size: 22px; font-weight: normal; } h3 { font-size: 15px; font-weight: normal; } p { font-size: 12px; } .logo { display: block; width: 124px; height: 104px; margin: 31px 46px 0 10px; float: left; } #header h1 { font-size: 23px; text-transform: uppercase; font-family: 'helveticaneueltstd-bd-75'; color: #004481; padding: 110px 0 33px 0; } #content { width: 100%; float: left; background: #b2b0b0; margin: 0 0 200px 0; -moz-box-shadow: 1px 0 5px 5px #acacac; -webkit-box-shadow: 1px 0 5px 5px #acacac; box-shadow: 1px 0 5px 5px #acacac; } i asked similar type of question @ here before days. but, didn't find solution. told me problem inner div(width: 940px) create problem small screen. but, point blue div(div.top) @ outer div width 100%. so, why inner div responsible this! told me make different stylesheet small screen. though, can't understand problem, shouldn't solution simple? but, if @ last it's solution make different stylesheet small screen, code scenario? basically, i'm making website of similar structure @ need lots of this:
.outer { width: 100%; float: left; } .inner { width: 940px; margin: 0 auto; } i don't want website responsive. but, @ least visitor shouldn't see scenario(blue or div.top: width: 100% can't fill 100% of browser) mobile. so, kindly give me solution of filling 100% width of browser blue div small screen in simple way. seems me adding 1 or tow line code of outer div can solve problem don't know code :( in advance!
if set rule width: 100%;, in case, way css done, 100% comes browser size, not actual width of site. site getting width of 940px, on mobile, browser size smaller.
just try add rule this:
html { min-width: 940px; } probably, enough.
by using min-width, instead of plain width, in case of browser longer width (like desktop), site same way now, , adjustment apply browsers smaller width.
Comments
Post a Comment