سوالی در رابطه با css و نمایش ناموفق در mobile

[megnatis]

با سلام خدمت دوستان معذرت میخوام سوالم در این قسمت دادم چون بخشی در رابطه با سی اس اس ندیدم:
کد زیر در سیستم و موبایل وب سیستم به درستی به نمایش در میاد ولی در گوشی و موبایل به درستی کار نمکنه چرا؟

.grid {
padding: 20px 20px 100px 20px;
max-width: 1300px;
margin: 0 auto;
list-style: none;
text-align: center;

}

.grid li {
display: inline-block;
width: 440px;
margin: 0;
padding: 20px;
text-align: right;
position: relative;
margin-top: -40px;
margin-right: -44px;
margin-left: -44px;
list-style-type: none;
}

.grid figure {
margin: 0;
position: relative;
}

.grid figure img {
max-width: 100%;
display: block;
position: relative;
}

.grid figcaption {
position: absolute;
top: 0;
left: 0;
padding: 20px;
background: #2c3f52;
color: #ed4e6e;
}

.grid figcaption h3 {
margin: 0;
padding: 0;
color: #fff;
}

.grid figcaption span:before {
content: 'مخلفات ';
}

.grid figcaption a {
text-align: center;
padding: 5px 10px;
border-radius: 6px;
display: inline-block;
background: #ed4e6e;
color: #fff;
}

/* Individual Caption Styles */

/* Caption Style 1 */
.cs-style-1 figcaption {
height: 100%;
width: 100%;
opacity: 0;
text-align: center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
}

.no-touch .cs-style-1 figure:hover figcaption,
.cs-style-1 figure.cs-hover figcaption {
opacity: 1;
-webkit-transform: translate(15px, 15px);
-moz-transform: translate(15px, 15px);
-ms-transform: translate(15px, 15px);
transform: translate(15px, 15px);
}

.cs-style-1 figcaption h3 {
margin-top: 70px;
}

.cs-style-1 figcaption span {
display: block;
}

.cs-style-1 figcaption a {
margin-top: 30px;
}

/* Caption Style 2 */
.cs-style-2 figure img {
z-index: 10;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}

.no-touch .cs-style-2 figure:hover img,
.cs-style-2 figure.cs-hover img {
-webkit-transform: translateY(-90px);
-moz-transform: translateY(-90px);
-ms-transform: translateY(-90px);
transform: translateY(-90px);
}

.cs-style-2 figcaption {
height: 90px;
width: 100%;
top: auto;
bottom: 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}

.cs-style-2 figcaption a {
position: absolute;
right: 20px;
top: 30px;
}

/* Caption Style 3 */
.cs-style-3 figure {
overflow: hidden;
}

.cs-style-3 figure img {
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}

.no-touch .cs-style-3 figure:hover img,
.cs-style-3 figure.cs-hover img {
-webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
-ms-transform: translateY(-50px);
transform: translateY(-50px);
}

.cs-style-3 figcaption {
height: 100px;
width: 100%;
top: auto;
bottom: 0;
opacity: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}

.no-touch .cs-style-3 figure:hover figcaption,
.cs-style-3 figure.cs-hover figcaption {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}

.cs-style-3 figcaption a {
position: absolute;
bottom: 20px;
right: 20px;
}

/* Caption Style 4 */
.cs-style-4 li {
-webkit-perspective: 1700px;
-moz-perspective: 1700px;
perspective: 1700px;
-webkit-perspective-origin: 0 50%;
-moz-perspective-origin: 0 50%;
perspective-origin: 0 50%;
}

.cs-style-4 figure {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.cs-style-4 figure > div {
overflow: hidden;
}

.cs-style-4 figure img {
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}

.no-touch .cs-style-4 figure:hover img,
.cs-style-4 figure.cs-hover img {
-webkit-transform: translateX(25%);
-moz-transform: translateX(25%);
-ms-transform: translateX(25%);
transform: translateX(25%);
}

.cs-style-4 figcaption {
height: 100%;
width: 50%;
opacity: 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
transform: rotateY(-90deg);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}

.no-touch .cs-style-4 figure:hover figcaption,
.cs-style-4 figure.cs-hover figcaption {
opacity: 1;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}

.cs-style-4 figcaption a {
position: absolute;
bottom: 20px;
right: 20px;
}

/* Caption Style 5 */
.cs-style-5 figure img {
z-index: 10;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}

.no-touch .cs-style-5 figure:hover img,
.cs-style-5 figure.cs-hover img {
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
-ms-transform: scale(0.4);
transform: scale(0.4);
}

.cs-style-5 figcaption {
height: 100%;
width: 100%;
opacity: 0;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
-moz-transition: -moz-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}

.no-touch .cs-style-5 figure:hover figcaption,
.cs-style-5 figure.cs-hover figcaption {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}

.cs-style-5 figure a {
position: absolute;
bottom: 20px;
right: 20px;
}

/* Caption Style 6 */
.cs-style-6 figure img {
z-index: 10;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}

.no-touch .cs-style-6 figure:hover img,
.cs-style-6 figure.cs-hover img {
-webkit-transform: translateY(-50px) scale(0.5);
-moz-transform: translateY(-50px) scale(0.5);
-ms-transform: translateY(-50px) scale(0.5);
transform: translateY(-50px) scale(0.5);
}

.cs-style-6 figcaption {
height: 100%;
width: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}

.cs-style-6 figcaption h3 {
margin-top: 60%;
}

.cs-style-6 figcaption a {
position: absolute;
bottom: 20px;
right: 20px;
}

/* Caption Style 7 */
.cs-style-7 li:first-child { z-index: 6; }
.cs-style-7 li:nth-child(2) { z-index: 5; }
.cs-style-7 li:nth-child(3) { z-index: 4; }
.cs-style-7 li:nth-child(4) { z-index: 3; }
.cs-style-7 li:nth-child(5) { z-index: 2; }
.cs-style-7 li:nth-child(6) { z-index: 1; }

.cs-style-7 figure img {
z-index: 10;
}

.cs-style-7 figcaption {
height: 100%;
width: 100%;
opacity: 0;
pointer-events: none;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.3s, height 0.3s, box-shadow 0.3s;
-moz-transition: opacity 0.3s, height 0.3s, box-shadow 0.3s;
transition: opacity 0.3s, height 0.3s, box-shadow 0.3s;
box-shadow: 0 0 0 0px #2c3f52;
}

.no-touch .cs-style-7 figure:hover figcaption,
.cs-style-7 figure.cs-hover figcaption {
pointer-events: auto;
opacity: 1;
height: 130%;
box-shadow: 0 0 0 10px #2c3f52;
}

.cs-style-7 figcaption h3 {
margin-top: 86%;
}

.cs-style-7 figcaption h3,
.cs-style-7 figcaption span,
.cs-style-7 figcaption a {
opacity: 0;
-webkit-transition: opacity 0s;
-moz-transition: opacity 0s;
transition: opacity 0s;
}

.cs-style-7 figcaption a {
position: absolute;
bottom: 20px;
right: 20px;
}

.no-touch .cs-style-7 figure:hover figcaption h3,
.no-touch .cs-style-7 figure:hover figcaption span,
.no-touch .cs-style-7 figure:hover figcaption a,
.cs-style-7 figure.cs-hover figcaption h3,
.cs-style-7 figure.cs-hover figcaption span,
.cs-style-7 figure.cs-hover figcaption a {
-webkit-transition: opacity 0.3s 0.2s;
-moz-transition: opacity 0.3s 0.2s;
transition: opacity 0.3s 0.2s;
opacity: 1;
}

@media screen and (max-width: 31.5em) {
.grid {
padding: 10px 10px 100px 10px;
}
.grid li {
width: 100%;
min-width: 300px;
}
}
@font-face {
font-family: 'bkoodkbd_1-webfont';
src:url('../font/bkoodak/bkoodkbd_1-webfont.eot');
src:url('../fonts/bkoodak/bkoodkbd_1-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/bkoodak/bkoodkbd_1-webfont.woff') format('woff'),
url('../fonts/bkoodak/bkoodkbd_1-webfont.ttf') format('truetype'),
url('../fonts/bkoodak/bkoodkbd_1-webfont.svg#bkoodkbd_1-webfont') format('svg');
font-weight: normal;
font-style: normal;
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

body {
font-family: 'b koodak', Calibri, Arial, sans-serif;
color: #b3b9bf;
/*background: #f9f9f9;*/
}

a {
color: #888;
text-decoration: none;
}

a:hover,
a:active {
color: #333;
}

/* Header Style */
.container > header {
margin: 0 auto;
padding: 2em;
text-align: center;
background: rgba(0,0,0,0.01);
}

.container > header h1 {
font-size: 2.625em;
line-height: 1.3;
margin: 0;
font-weight: 300;
}

/* To Navigation Style */
.codrops-top {
background: #fff;
background: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
width: 100%;
font-size: 0.69em;
line-height: 2.2;
}

.codrops-top a {
padding: 0 1em;
letter-spacing: 0.1em;
color: #888;
display: inline-block;
}

.codrops-top a:hover {
background: rgba(255,255,255,0.95);
color: #333;
}

.codrops-top span.right {
float: right;
}

.codrops-top span.right a {
float: left;
display: block;
}

.codrops-icon:before {
font-family: 'bkoodkbd_1-webfont';
margin: 0 4px;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
content: "\e001";
}

.codrops-icon-prev:before {
content: "\e004";
}

.codrops-icon-archive:before {
content: "\e002";
}

.codrops-icon-next:before {
content: "\e000";
}

.codrops-icon-about:before {
content: "\e003";
}

/* Demo Buttons Style */
.codrops-demos {
padding-top: 1em;
font-size: 0.9em;
}

.codrops-demos a {
display: inline-block;
margin: 0.5em;
padding: 0.7em 1.1em;
border: 3px solid #b3b9bf;
color: #b3b9bf;
font-weight: 700;
}

.codrops-demos a:hover,
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
border-color: #2c3f52;
color: #2c3f52;
}

@media screen and (max-width: 25em) {

.codrops-icon span {
display: none;
}

}
نمونه در آدرس :
http://www.poroshad.ir/index.php/menu


ممنون میشم کمکم کنید