I've tired for finding an answer of a question. I want a website that can be seen same from mobile or similar device. I don't mean about responsive rather I mean, from mobile visitor can see same layout of the website even by horizontal mouse scrolling. This is possible for every website. Do not need any code for that. Same layout is normally seen by mobile with horizontal mouse scrolling. But, I've troubled with one scenario. I've built an example. Here is it..
If you see that website from mobile or similar device like small notebook etc(or resizing to small browser), you'll see this:
You're seeing that blue div can't be able to fill the 100% width of the browser though that div was defined with 100% width! Look the grey div below portion of that images. At normal stage both blue(div.top) and grey(div#gcontent) div is center of the browser but at small screen, grey div fill the 100% width where blue div has failed to fill 100% width. What's the reason. How can I fix it?
structure of it:
<body>
<!-- top start -->
<div class="outer top">
<div class="inner">
<div class="nav">
<p>Lorem Ipsum is simply 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 is simply dummy text ... of Lorem Ipsum.</P>
<P>Lorem Ipsum is simply dummy text ... of Lorem Ipsum.</P>
<P>Lorem Ipsum is simply 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;
}
a {
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 a {
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 a similar type of question at here before some days. But, I didn't find a solution. Somebody told me problem with inner div(width: 940px) which create that problem for small screen. But, my point is blue div(div.top) is at outer div whose width is 100%. So, why inner div is responsible for this! Somebody told me to make a different stylesheet for small screen. Though, I can't understand the problem, but shouldn't the solution be simple? But, if at last it's the only solution to make a different stylesheet for small screen, then what will be the code for that scenario? Basically, I'm making a website of this similar structure at where I need lots of this:
.outer {
width: 100%;
float: left;
}
.inner {
width: 940px;
margin: 0 auto;
}
I don't want that website would be responsive. But, at least visitor shouldn't see that scenario(blue or div.top: width: 100% can't fill 100% of the browser) from mobile. So, kindly just give me the solution of filling the 100% width of the browser by that blue div for any small screen in simple way. It seems to me adding one or tow line code of that outer div can solve the problem but I don't know what are that code :( Thanks in advance!
The problem is that the div with the blue background is specified to also be 100% width. When 100% width is less than 940px then the blue background will be smaller than the div containing the text. You could either change the site so that there is no fixed 940px width, or apply the
topclass to the same div that contains the text (with theinnerclass).