First of all you have to put this on the head of your html page :
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>
After you have set the css type for screen size :
* Smartphones (portrait and landscape) ———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ———– */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ———– */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ———– */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ———– */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Carefull the order is important!!!.
I made this for rgbboy scoreborad .
Example : example.php
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>
<html>
<head data-gwd-animation-mode=”quickMode“>
<title>rgbboy</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8“>
<style type=”text/css”>
@media only screen
and (min-width : 320px) {
body {
-webkit-transform: perspective(500px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
background-image: -webkit-linear-gradient(left, rgb(0, 0, 0) 0%, rgb(130, 4, 8) 58%, rgb(0, 0, 0) 100%);
}
.gwd-div-txb2 {
position: absolute;
font-family: ‘Times New Roman’;
color: rgb(0, 0, 0);
text-align: center;
}
.gwd-div-space {
position: relative;
width: 470px;
height: 10px;
color: transparent;
border-radius: 20px;
border-width: 3px;
border-style: solid;
left: 3px;
top: 0px;
}
.gwd-div-jcvw {
position: absolute;
width: 470px;
height: 612px;
font-family: ‘Times New Roman’;
text-align: center;
color: rgb(0, 0, 0);
border-radius: 20px;
border-width: 3px;
border-style: solid;
left: 3px;
top: 100px;
background-image: -webkit-linear-gradient(left, rgb(0, 0, 0) 0%, rgb(84, 185, 0) 51%, rgb(0, 0, 0) 100%);
}
.gwd-center-3zyl {
-webkit-transform: translate3d(290px, 149.9px, 0px);
-webkit-transform-style: preserve-3d;
}
.gwd-div-kuj8 {
position: relative;
width: 430px;
height: 44px;
left: 20px;
top: 20px;
color: rgb(0, 0, 0);
border-radius: 10px;
opacity: 0.7;
background-image: -webkit-linear-gradient(left, rgb(0, 0, 0) 0%, rgb(32, 91, 176) 50%, rgb(0, 0, 0) 97%);
}
.gwd-body {
background-color: transparent;
}
.centered {
position: relative;
top: 50%;
left: 50%;
margin-top: -120px;
margin-left: -470px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -54, -96, 0, 1);
-webkit-transform-style: preserve-3d;
}
.gwd-body {
width: 100%;
height: 100%;
}
.gwd-div-gkos {
position: absolute;
font-family: ‘Times New Roman’;
text-align: left;
color: rgb(0, 0, 0);
left: 289px;
top: 345px;
border-image-source: none;
border-color: rgb(42, 159, 41);
background-image: none;
}
.gwd-span-l9zg {
position:inherit;
top:5px;
font-family: ‘Times New Roman’;
font-size: 25px;
color:rgb(130, 255, 129);
font-weight: bold;
}
.gwd-span-titolo {
font-family: ‘Times New Roman’;
font-size: 30px;
color:rgb(130, 255, 129);
font-weight: bold;
}
table {
width:470px;
}
}
@media only screen
and (min-width : 1024px) {
body {
-webkit-transform: perspective(500px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
background-image: -webkit-linear-gradient(left, rgb(0, 0, 0) 0%, rgb(130, 4, 8) 58%, rgb(0, 0, 0) 100%);
}
.gwd-div-txb2 {
position: absolute;
font-family: ‘Times New Roman’;
color: rgb(0, 0, 0);
text-align: center;
}
.gwd-div-space {
position: relative;
width: 770px;
height: 10px;
color: transparent;
border-radius: 20px;
border-width: 3px;
border-style: solid;
left: 3px;
top: 0px;
}
.gwd-div-jcvw {
position: absolute;
width: 770px;
height: 612px;
font-family: ‘Times New Roman’;
text-align: center;
color: rgb(0, 0, 0);
border-radius: 20px;
border-width: 3px;
border-style: solid;
left: 3px;
top: 100px;
background-image: -webkit-linear-gradient(left, rgb(0, 0, 0) 0%, rgb(84, 185, 0) 51%, rgb(0, 0, 0) 100%);
}
.gwd-center-3zyl {
-webkit-transform: translate3d(290px, 149.9px, 0px);
-webkit-transform-style: preserve-3d;
}
.gwd-div-kuj8 {
position: relative;
width: 730px;
height: 44px;
left: 20px;
top: 20px;
color: rgb(0, 0, 0);
border-radius: 10px;
opacity: 0.7;
background-image: -webkit-linear-gradient(left, rgb(0, 0, 0) 0%, rgb(32, 91, 176) 50%, rgb(0, 0, 0) 97%);
}
.gwd-body {
background-color: transparent;
}
.centered {
position: relative;
top: 50%;
left: 50%;
margin-top: -120px;
margin-left: -670px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -54, -96, 0, 1);
-webkit-transform-style: preserve-3d;
}
.gwd-div-gkos {
position: absolute;
font-family: ‘Times New Roman’;
text-align: left;
color: rgb(0, 0, 0);
left: 689px;
top: 345px;
border-image-source: none;
border-color: rgb(42, 159, 41);
background-image: none;
}
.gwd-span-l9zg {
position:inherit;
top:5px;
font-family: ‘Times New Roman’;
font-size: 25px;
color:rgb(130, 255, 129);
font-weight: bold;
}
.gwd-span-titolo {
font-family: ‘Times New Roman’;
font-size: 30px;
color:rgb(130, 255, 129);
font-weight: bold;
}
table {
width:770px;
}
}
</style>
<link href=”https://fonts.googleapis.com/css?family=Electrolize|Press+Start+2P” rel=”stylesheet” type=”text/css“>
</head>
<body class=”gwd-body“>
<br/>
<div class=”centered editable“>
<center class=”gwd-center-3zyl“>
<div class=”gwd-div-txb2“></div>
<div class=”gwd-div-jcvw“>
<?php
require_once(‘loader.php’);
$result = allstore();
if (mysql_num_rows($result)> 0 ) {
echo “<table >” ;
while ($row = mysql_fetch_array($result)) {
echo “<tr class=\”gwd-div-kuj8\” ><td> <img src=\”images/{$row[2]}.png\” width=\”25px\” height=\”40px\” /> </td>
<td valign=\”middle\”> <div class=\”gwd-span-l9zg\”> {$row[0]}</div> </td>
<td valign=\”middle\”> <div class=\”gwd-span-l9zg\”> {$row[1]} </div> </td>
</tr>”;
}
echo “</table>”;
}
mysql_free_result($result);
?>
</div>
</center>
</div>
</body>
</html>
