Responsive issue

shahzadsiddiqui8 · March 26, 2014, 7:32am

Hi all,

I am using this html and css code but getting unwanted space on right hand side and page scrolling up and down instead of comes fix on the device, please have a look on html and css and let me know the error asap.

html


<!DOCTYPE html>
<html lang="en" manifest="techmCorpApp.appcache">
    <head>
        <title>Tech Mahindra - Mobile</title>
       <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width,height=device-height">
	   
        <meta name="description" content="Tech Mahindra ipad content" />
        <meta name="keywords" content="tech mahindra" />
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
        <link rel="stylesheet" type="text/css" href="./style.css" />
		<script type="text/javascript" src="./jquery-1.8.2.min.js"></script>
		<script type="text/javascript" src="./core.js"></script>
		<script>
			// Check if a new cache is available on page load.
			window.addEventListener('load', function(e) {

			  window.applicationCache.addEventListener('updateready', function(e) {
				if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
				  // Browser downloaded a new app cache.
				  if (confirm('A new version of this site is available. Load it?')) {
					window.location.reload();
				  }
				} else {
				  // Manifest didn't changed. Nothing new to server.
				}
			  }, false);

			}, false);
		</script>
	</head>
    <body>
		<div id="wrapper">				
				<div class="grid box-ht">
					<div class="imgholder"><img src="./new-images/sdn_img1.jpg" alt="" /></div>
					<div class="gridcontent gridcontents">
						<h3>SDN</h3>
						<p></p>
					</div>
				</div>
				<div class="grid box-ht">
					<div class="imgholder"><img src="./new-images/transformation.jpg" alt="" /></div>
					<div class="gridcontent gridcontents">
						<h3>Transformation </h3>
						<p></p>
					</div>
				</div>			
				
						
				<a href="video.html">
				<div class="grid vclick box-ht">
					<div class="imgholder"><img src="./new-images/innovation.jpg" alt="" /></div>
					<div class="gridcontent gridcontents">
						<h3>Innovation</h3>
						<p></p>
					</div>
				</div>
				</a> 		
				<div class="grid box-ht">
					<div class="imgholder"><img src="./new-images/mobile_first.jpg" alt="" /></div>
					<div class="gridcontent gridcontents">
						<h3>Mobile First</h3>
						<p></p>
					</div>
				</div>

				<div class="grid box-ht">
					<div class="imgholder"><img src="./new-images/big_data.jpg" alt="" /></div>
					<div class="gridcontent gridcontents">
						<h3>Big Data</h3>
						<p></p>
					</div>
				</div>
				<div class="grid box-ht">
					<div class="imgholder"><img src="./new-images/digital_first.jpg" alt="" /></div>
					<div class="gridcontent gridcontents">
						<h3>Digital First</h3>
						<p></p>
					</div>	
				
				</div>
		</div>			
	</body>
</html>

Css


@charset "utf-8";
/* ========================= reset code starts ============================= */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*================================== reset code ends ==========================*/
body{
	
	font-family: 'Arial', 'San-serif';
	font-size: 62.5%;
	color: #333;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
	margin: 0;
	overflow: hidden;
}

#wrapper {
	background:url(./bodybg.jpg) no-repeat;
	padding: 0.74em;	
	height: 102.4em;
}
.firstCol{
	float: left;
    width: 66.7%;
}
.secCol{	
	float:left;
	}
.rowCont{	
	width: 100%;	
	height:97%;
	position: relative;
	float:left;	
}
.grid  {	
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(211,211,211,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(211,211,211,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(211,211,211,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(211,211,211,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(211,211,211,0) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(211,211,211,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00d3d3d3',GradientType=0 ); /* IE6-9 */
	border: 0.1em solid grey;
	margin: 0.5em;	
	/*width: 31.9%;
	height: 23%;*/
	width: 23.9em;
	height: 23.1em;
	position: relative;
	cursor:pointer;
	float:left;
}

.box-ht {	
	
	height: 18.1em;
}

.grid:hover{
	border: 0.1em solid #3789f9;
	box-shadow:2px 2px 10px 5px #cccaca inset; 
}
.uparrow{
	left: 35em;
    position: relative;
    top: -1.1em;
	}
.videoSinglegrid{
	background:#333;
	width: 74em;
	border: 0.1em solid grey;
	position: relative;
	float:left;
	margin: 0.5em;		
}

.close{
	float:right;
	margin:1em;
	cursor:pointer;
}
.video{
	text-align:center;
	margin:1em;
	
}

.singlegrid{
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(211,211,211,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(211,211,211,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(211,211,211,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(211,211,211,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(211,211,211,0) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(211,211,211,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00d3d3d3',GradientType=0 ); /* IE6-9 */
	border: 0.1em solid grey;
	width: 98%;	
	height:97%;
	position: relative;
	float:left;
	margin: 0.5em;
}

.threeinonegrid{
	border: 0.1em solid grey;
	margin: 0.5em;
	float:left;
	height: 71.7em;
	width: 23.88em;
}

.imgholder{
	padding:1em;
}
/* add this new class  */
.grid .imgholder img{
width:219px;
height:127px;
}
.profimgholder{
	padding:1em;
	float:left;
}
.clearBoth{
	clear:both;
	}
.gridcontent{
	padding:0 1em 1em 1em;
}
.gridcontent h3{
	font-size:160.0%;
	font-weight:bold;
	color:#333;
	text-transform:uppercase;
	padding-bottom:0.25em;
	text-align:center;	
	}
.gridcontent p{
	font-size:120.0%;
	line-height:1.2em;	
	color:#000;	
}

.dataTble table{
width:100%;
background:#fff;
}

.dataTble table tr{
	padding:1em;
}
.dataTble table tr th{
	font-size:120%;
	background:#c9252c;
	font-weight:bold;
	color:#fff;
}
.dataTble table tr td{
	font-size:110%;
	background:#E5E3E3;
}
.dataTble table tr td, .dataTble table tr th{
text-align:center;
border:1px solid #333;
padding:0.89em;
}

.myProfile{	
	float: left;
    padding: 2em;
    width: 39%;
}
.myProfile p{
	line-height:2em;
	font-size:120%;
	font-weight:bold;
}
.myProfile p label{
	display: inline-block;
    width: 30%;
	}
.techMlogo{
	float:right;
	padding-top:2em;
	}

.backbtn{
	padding:1em;
	border-bottom: 1px solid #808080;
	}
.documentlist{
	padding:1em;
	}
.documentlist ol{
	list-style-type:decimal;
	font-family:arial;
	font-size:200%;
	padding-left:2em;
}
.documentlist ol li{
	padding:0.5em 0;
	}
.documentlist ol li a{
	color:#1A6DCC;
	text-decoration:none;
}

.documentlist ol li a:hover{
	color:#E56E24;
	}

/*------ Itinerary page css------ */
	#itinerarytable{
		 margin:5px 5px 10px;
		 width:99%;
		 font-size: 120%;
    }
    #itinerarytable tr th{
		background:#aaa;
		border-radius:12px 12px 0 0;
		text-transform:uppercase;
    }
	#itinerarytable  tr  td, #itinerarytable  tr  th{
		padding: 14px 8px;
		vertical-align: top;
		line-height: 18px;
		border: 2px solid #FFFFFF;		
	}
    #itinerarytable tr{
        background:#fff;
    }
    #itinerarytable tr:nth-child(even){
        background:#eee;
    }
	#itinerarytable tr td:first-child{
		color:#F84545;
		font-weight:bold;
		width: 13%;
		background:rgba(255, 132, 132, .1);
	}
	#itinerarytable tr td:nth-child(2){
		font-weight:bold;
		background:rgba(228, 241, 215, .3);	
	}
	#itinerarytable tr td:nth-child(3) {
		background:rgba(217, 235, 211, .5);		
	}	
	#itinerarytable tr td:nth-child(4) {
		background:rgba(218, 237, 251, .3);	
		width: 13%;		
	}
	#itinerarytable tr:nth-child(2n) {
		background: none repeat scroll 0 0 #ebebeb;
	}

     #itinerarytable tr th{
		background: #E1E1E1; /* Old browsers */
		background: -moz-linear-gradient(top, #E1E1E1 0%, #939393 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E1E1E1), color-stop(100%,#939393)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #E1E1E1 0%,#939393 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #E1E1E1 0%,#939393 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #E1E1E1 0%,#939393 100%); /* IE10+ */
		background: linear-gradient(to bottom, #E1E1E1 0%,#939393 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E1E1E1', endColorstr='#939393',GradientType=0 ); /* IE6-9 */
		font-weight:bold;
	}

		
	
	
/* MEDIA QUERIES FOR IPAD */
/* iPads (landscape) ----------- */
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) 
and (orientation : landscape) {

  #wrapper {
	background:url(./bodybg_landscape.jpg) no-repeat;
	padding: 0.74em;	
	height: 102.4em;
	width:100%;
	overflow:hidden;
}
.singlegrid{
	width: 98.9%;
	height: 72%;
}
.firstCol{
	float:left;
	width: 49.75%;
}
.rowCont{
	float: left;
    width: 12.9em;
}
/* added new class */
.grid  {	
	width: 20.9em;
}

.grid .imgholder img{
width:190px;
height:127px;
}

/*------ Itinerary page ------ */
#itinerarytable  tr  td, #itinerarytable  tr  th{
		padding: 7px;		
	}
#itinerarytable tr td:first-child {
    width: 10%;
}	
/*------ Itinerary page end ------ */	

}

ralphm · March 26, 2014, 7:42am

Your boxes have a fixed width, so will only fill a part of the screen they can fit in:

.grid {
border: 0.1em solid grey;
margin: 0.5em;
width: 23.9em;
height: 23.1em;
float: left;
}

You could change that by resetting the width within the media queries, say setting the width to 100%. Make sure to take into account margin, padding and borders, though. The best way to handle that these days is with box-sizing: border-box etc.

PaulOB · March 26, 2014, 11:06am

Hi,

The page doesn’t scroll because you have hidden the scroll mechanism here with overflow:hidden on the body element!


body{
	
	font-family: 'Arial', 'San-serif';
	font-size: 62.5%;
	color: #333;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
	margin: 0;
	[B]overflow: hidden;[/B]
}

Remove the overflow:hidden and the page content can be scrolled. You will very rarely want to hide the overflow on the body element (maybe never).

You may need to explain in a little more detail what you are trying to accomplish as your heights on wrappers are very bad and will break in most circumstances. Again you will very rarely want to limit your content containers to a fixed height as you never know what content they may hold.

Topic		Replies	Views
Finished website but have couple of BUGS! HTML & CSS	8	734	February 21, 2015
Iphone responsive problem HTML & CSS	3	450	October 8, 2014
Issue with ipad layout being forced left HTML & CSS	2	577	October 8, 2014
CSS padding issue in iPad and iPhone HTML & CSS	5	14374	October 8, 2014
iPad CSS for Page Rendering HTML & CSS	10	928	October 8, 2014

Responsive issue

Related topics