Search code examples
cssmedia-queries

Responsive doesn't work in phone

I create a website and I make hem responsive with @media, All things are right, when I slimming with Mozilla I don't have any problem

but when I see my site with my phone all things are lost, I see a disaster :'(

I make Mozilla size { 1280px, 980px, 800px, 768px, 360px, 320px }

@media only screen and (max-width : 992px) {
body {
	background:url(img/Saad.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.logo {
	background: transparent url("img/logo.png") no-repeat scroll center top;
	width: 212px;
	height: 89px;
	position: absolute;
	top: 85px;
	margin-left: 702px;
}

.gauche {
	margin-top : -253px;
	float: left;
	width: 250px;
	height: 75px;
	position: absolute;
	margin-left: 15px;	
	}

.rs li {
	float: left;
	width: 47px;
	height: 47px;
	margin:0px 4px 0px 0px;
}

.players {
    width: 700px;
    margin: 321px auto;
    display: block;
    position: relative;
    height: 90px;
}

.hicham{
	display: block;
	margin: -563px 140px 79px 130px;
	position: absolute;
}
.hand{
	display: block;
	margin: -495px 0px 94px 357px;
}

.basket{
	margin: -906px 0px 98px 260px;
}

.foot, .hicham, .hand, .basket{
	-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.foot:hover, .hicham:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

.hand:hover, .basket:hover{
  -webkit-transform: rotate(10deg);
     -moz-transform: rotate(10deg);
       -o-transform: rotate(10deg);
      -ms-transform: rotate(10deg);
          transform: rotate(10deg);
}

a li{
list-style: none;
}

.fb {
	background: transparent url("icon/facebook.png") no-repeat center top;
}

.twitter {
	background: transparent url("icon/twitter.png") no-repeat scroll center top;
	}

.instagram {
	background: transparent url("icon/icon4.png") no-repeat scroll center top;
}

.youtube {
	background: transparent url("icon/youtube.png") no-repeat scroll center top;
}

.sponsors {
	display: block;
	width: auto;
	height: 65px;
	background: #FFF url("img/pubb.png") no-repeat scroll center top;
	margin-top: 320px;
}

.copyright {
	font-family: monospace;
	color: #FFF;
	text-transform: inherit;
	display: block;
	text-align: center;
	margin-top: 30px;
	font-weight: bold;
	font-size: 12px;
}
}


/* Medium Devices, Desktops */
@media only screen and (max-width : 800px) {
body {
	background:url(img/Saad.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.logo {
	background: transparent url("img/logo.png") no-repeat scroll center top;
	width: 212px;
	height: 89px;
	position: absolute;
	top: 85px;
	margin-left: 555px;
}

.gauche {
	margin-top : -253px;
	float: left;
	width: 250px;
	height: 75px;
	position: absolute;
	margin-left: 15px;	
	}

.rs li {
	float: left;
	width: 47px;
	height: 47px;
	margin:0px 4px 0px 0px;
}

.players{
	width: 700px;
	margin: 354px auto;
	display: block;
	position: relative;
	height: 90px;
}

.hicham{
	display: block;
	margin: -563px 140px 79px 130px;
	position: absolute;
}
.hand{
	display: block;
	margin: -495px 0px 94px 357px;
}

.basket{
	margin: -906px 0px 98px 260px;
}

.foot, .hicham, .hand, .basket{
	-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.foot:hover, .hicham:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

.hand:hover, .basket:hover{
  -webkit-transform: rotate(10deg);
     -moz-transform: rotate(10deg);
       -o-transform: rotate(10deg);
      -ms-transform: rotate(10deg);
          transform: rotate(10deg);
}

a li{
list-style: none;
}

.fb {
	background: transparent url("icon/facebook.png") no-repeat center top;
}

.twitter {
	background: transparent url("icon/twitter.png") no-repeat scroll center top;
	}

.instagram {
	background: transparent url("icon/icon4.png") no-repeat scroll center top;
}

.youtube {
	background: transparent url("icon/youtube.png") no-repeat scroll center top;
}

.sponsors {
	display: block;
	width: auto;
	height: 65px;
	background: #FFF url("img/pubb.png") no-repeat scroll center top;
	margin-top: 320px;
}

.copyright {
	font-family: monospace;
	color: #FFF;
	text-transform: inherit;
	display: block;
	text-align: center;
	margin-top: 30px;
	font-weight: bold;
	font-size: 12px;
}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	body {
	background:url(img/Saad.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.logo {
	background: transparent url("img/logo.png") no-repeat scroll center top;
	width: 212px;
	height: 89px;
	position: absolute;
	top: 85px;
	margin-left: 526px;
}

.gauche {
	margin-top : -237px;
	float: left;
	width: 250px;
	height: 75px;
	position: absolute;
	margin-left: 15px;	
	}

.rs li {
	float: left;
	width: 47px;
	height: 47px;
	margin:0px 4px 0px 0px;
}

.players{
	width: 700px;
	margin: 353px auto;
	display: block;
	position: relative;
	height: 90px;
}

.hicham{
	display: block;
	margin: -563px 140px 79px 130px;
	position: absolute;
}
.hand{
	display: block;
	margin: -495px 0px 94px 357px;
}

.basket{
	margin: -906px 0px 98px 260px;
}

.foot, .hicham, .hand, .basket{
	-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.foot:hover, .hicham:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

.hand:hover, .basket:hover{
  -webkit-transform: rotate(10deg);
     -moz-transform: rotate(10deg);
       -o-transform: rotate(10deg);
      -ms-transform: rotate(10deg);
          transform: rotate(10deg);
}

a li{
list-style: none;
}

.fb {
	background: transparent url("icon/facebook.png") no-repeat center top;
}

.twitter {
	background: transparent url("icon/twitter.png") no-repeat scroll center top;
	}

.instagram {
	background: transparent url("icon/icon4.png") no-repeat scroll center top;
}

.youtube {
	background: transparent url("icon/youtube.png") no-repeat scroll center top;
}

.sponsors {
	display: block;
	width: auto;
	height: 65px;
	background: #FFF url("img/pubb.png") no-repeat scroll center top;
	margin-top: 320px;
}

.copyright {
	font-family: monospace;
	color: #FFF;
	text-transform: inherit;
	display: block;
	text-align: center;
	margin-top: 30px;
	font-weight: bold;
	font-size: 12px;
}
}


/* Custom, iPhone Retina */ 
@media only screen and (max-width : 360px) {
	body {
	background:url(img/Saad.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.logo {
	background: transparent url("img/logo.png") no-repeat scroll center top;
	width: 212px;
	height: 89px;
	position: absolute;
	top: 22px;
	margin-left: 70px;
}

.gauche {
	visibility: hidden;	
	}



.players{
	margin: 100px 0px 0px -374px;
}

.foot{
	margin: -1px 0px 0px 417px;
}

.hicham{
	display: block;
	position: absolute;
	visibility: hidden;
}
.hand{
	display: block;
	visibility: hidden;
}

.basket{
	visibility: hidden;
}



.sponsors {
	display: block;
	width: auto;
	height: 65px;
	background: #FFF url("img/pubb1.png") no-repeat scroll center top;
	margin-top: 320px;
}

.copyright {
	font-family: monospace;
	color: #FFF;
	text-transform: inherit;
	display: block;
	text-align: center;
	margin-top: 20px;
	font-weight: bold;
	font-size: 12px;
}
}


/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 320px) {

body{
background:url(img/Saad.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	overflow-x:hidden;
}

.players {
    margin: 131px 0px 0px -405px;
}

.logo {
	margin: -9px 0px 0px 49px;
}


.gauche {
	visibility: hidden;	
	}


.sponsors {
    display: block;
    width: auto;
    height: 25px;
    background: #FFF url("img/pubb1.png") no-repeat scroll center top;
    margin-top: 148px;
}

	

.foot{
	margin: -28px 0px 0px 461px;
	width: 200px;
}

.hicham{
	display: block;
	position: absolute;
	visibility: hidden;
}
.hand{
	display: block;
	visibility: hidden;
}

.basket{
	visibility: hidden;
}

.copyright {
	font-family: monospace;
color: #FFF;
text-transform: inherit;
display: block;
text-align: center;
margin-top: 6px;
font-weight: bold;
font-size: 12px;
}
}

Any help ?

Solution

  • Mobile browsers try to make your site look good, so they don't render your site pixel for pixel, like you might expect. For example: let's say your phone has a width of 250px, but your phone might tell your website that it is 500px or even 1000px wide, which in turn make your @media queries obsolete.

    After that long explanation, this is what you need to add to the <head> of your html code: <meta name="viewport" content="width=device-width, initial-scale=1">, that should make your phone (and all other phones) tell your website what the phone's width REALLY is. And all your @media queries should work.

    Hope that helped!

    Here's some articles worth checking out for more information:

    1. CSS Tricks: https://css-tricks.com/snippets/html/responsive-meta-tag/
    2. MDN: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
    3. Envato Tuts+: http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972