{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 smile是对你的礼貌 的问题《Responsive layout for mobile tablet》','https://www.manongdao.com/q-1122871.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I created an ecommerce page and added @media to make the page responsive. but its not working fine can you please take a look where I am doing mistake more over if my coding style is wrong then please correct . More over my images are not also responsive too..
Here is the code
@media(min-width:1200px){
*{margin:0; padding:0;}
#header{
width:100%; height:54px; background-color:#090; position:fixed; z-index:2;
}
#wrapper{
width:80%; background-color:#F7F4F4; margin:auto;
}
#category1{
width:100%; background-color:#FF6;
}
#category1::after{content:" "; display:block; clear:both;
}
#cat1_leftside{
width:20%; height:350px; background-color:#0FF; float:left;
}
#cat1_rightside{
width:80%; height:350px; background-color:#636; float:right; color: white;
}
#home_category1_boxes1{
width: 180px; position: absolute; display: inline; height: 350px;
}
#home_category1_boxes2{
width: 390px; position: absolute; display: inline; height: 350px; margin-left: 200px;
}
#home_category1_boxes3{
width: 390px; position: absolute; display: inline; height: 350px; margin-left: 577px;
}
#footer{
width:100%; height:100px; background-color:#2F2F2F;
}
}
@media(min-width:768px) and (max-width:1199px){
*{margin:0; padding:0;}
#header{
width:100%; height:54px; background-color:#090; position:fixed; z-index:2;
}
#wrapper{
width:80%; background-color:#F7F4F4; margin:auto;
}
#category1{
width:100%; background-color:#FF6;
}
#category1::after{content:" "; display:block; clear:both;
}
#cat1_leftside{
width:20%; height:350px; background-color:#0FF; float:left;
}
#cat1_rightside{
width:80%; height:350px; background-color:#636; float:right; color: white;
}
#home_category1_boxes1{
width: 180px; position: absolute; display: inline; height: 350px;
}
#home_category1_boxes2{
width: 390px; position: absolute; display: inline; height: 350px; margin-left: 200px;
}
#home_category1_boxes3{
width: 390px; position: absolute; display: inline; height: 350px; margin-left: 577px;
}
#footer{
width:100%; height:100px; background-color:#2F2F2F;
}
}
@media(min-width:100px) and (max-width:767px){
*{margin:0; padding:0;}
#header{
width:100%; height:54px; background-color:#090; position:fixed; z-index:2;
}
#wrapper{
width:80%; background-color:#F7F4F4; margin:auto;
}
#category1{
width:100%; background-color:#FF6;
}
#category1::after{content:" "; display:block; clear:both;
}
#cat1_leftside{
width:20%; height:350px; background-color:#0FF;
}
#cat1_rightside{
width:80%; height:350px; background-color:#636; color: white;
}
#home_category1_boxes1{
width: 180px; position: absolute; height: 350px;
}
#home_category1_boxes2{
width: 390px; position: absolute; height: 350px; margin-left: 200px;
}
#home_category1_boxes3{
width: 390px; position: absolute; height: 350px; margin-left: 577px;
}
#footer{
width:100%; height:100px; background-color:#2F2F2F;
}
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Resposive layout</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="header"> <h3> Header area </h3>
</div>
<br>
<br>
<br>
<div id="wrapper">
<div id="category1">
<div id="cat1_leftside"><h3> Horizontal Slider Cat 1 </h3></div>
<div id="cat1_rightside"><h3> </h3></div>
<div id="home_category1_boxes1">
<ol><h3>Men Dress</h3> </ol>
<ol>Men Dress 1</ol>
<ol>Men Dress 2</ol>
<ol>Men Dress 3</ol>
<br>
<ol><h3>Men Accessories</h3></ol>
<ol>Men Accessories1</ol>
<ol>Men Accessories2</ol>
<ol>Men Accessories3</ol>
</div>
<div id="home_category1_boxes2"> <img src="images/boxes/cat1/big.jpg" width="376" height="350"></div>
<div id="home_category1_boxes3">
<img src="images/boxes/cat1/box1.jpg" width="140px"/>
<img src="images/boxes/cat1/box2.jpg" width="140px"/>
<img src="images/boxes/cat1/box3.jpg" width="140px"/>
<img src="images/boxes/cat1/box4.jpg" width="140px"/>
</div>
</div>
<br>
<div id="footer">
</div>
</div>
</body>
</html>
EDITED AFER EDIT OF QUESTION AND COMMENTS:
First a general remark (from my original answer):
The usual way is to first define general rules which apply to all sizes and then (below that) define rules in media queries which overwrite some of the general rules.
This can be done with a mobile-first approach (where the general rules apply to mobile sizes and are then partly overwritten by desktio rules) or with a desktop-first apporach (where the general rules are for desktop and some of them overwritten for mobile sizes). I would NOT create three completely different sets of rules - it's just too much...
Now about your code: There are a lot of things I would change, but I won't recreate the whole page for you, so here is just a remark and answer to your last comment:
In the CSS for mobile you have this rule:
This means that a 390px wide container is placed 577px from the left border of its container/window, i.e. its right border will be 967px from the left border of the container. But that's inside a ruleset which only applies to screens below 768px width, so it is pushed out of the container by 200px - this simply cannot work. So, first of all, change that margin setting.
Actually, you shouldn't use
position: absoluteon those.home_category1_boxescontainers - it makes them overlap and not-responsive in this case. Just erase that and try to create a regular flow of containers and elements.