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

Popular posts from this blog

java - JavaFX 2 slider labelFormatter not being used -

-
i have following code not label slider "foo50", etc... 1 expect setlabelformatter call, instead seems have no effect (the slider labelled 50, 100, etc , println's dont run). there missing? not implemented in default 2.2 skin? using oracle java 7 package javafxbugtest; import javafx.application.application; import javafx.scene.*; import javafx.scene.control.*; import javafx.stage.*; import javafx.util.stringconverter; public class javafxbugtest extends application { @override public void start(final stage primarystage) { slider cp = new slider(); cp.setlabelformatter(new stringconverter<double>() { @override public string tostring(double t) { system.out.println("nope?"); return "foo" + t.tostring(); } @override public double fromstring(string string) { system.out.println("he
Read more

Detect support for Shoutcast ICY MP3 without navigator.userAgent in Firefox? -

-
the current version of mozilla firefox 23.0.1, version not support play mp3 shoutcast streams tcp port different 80 (most common 8000 shoutcast 1.9.8). i use flash when mp3 support not available in html5 audio, way detect is: try{ var = document.createelement('audio'); r = !!(a.canplaytype && !!a.canplaytype("audio/mpeg; codecs=mp3").replace(/^no$/,'')) }catch(e){ r = false; } the support mp3 shoutcast streams in firefox added in version 24 . a.canplaytype("audio/mpeg; codecs=mp3") = in chrome , firefox, chrome support, firefox not support, due current code detect not work firefox. the current version of jquery support ie 6 1.10.2, version not has .browser i think "stylized" way testing features , not querying browsers / versions, notwithstanding here see hard not violate "principle". what "stylized" way of detect mp3 icy support without navigator.useragent in firefox? ther
Read more

web - SVG not rendering properly in Firefox -

-
i have problem svg renderring in firefox. whilst works in safari, chrome or in ie, doesn't work in firefox. inspecting element seems layers there, background visible if it's z-index higher z-index of others. rendered in firefox: svg logo in firefox link original source file: svg file thanks help. ps: used sketch 3 export svg. if helps somehow. you're experiencing bug 995813 . i fixed bug time ago change still making way through release process example display correctly firefox 31 onwards released on 22 july 2014. in meantime if move fill="white" <mask> element child <use> element work around firefox bug.
Read more