Permalink
Browse files

Added a temporary html page that shows the site at different widths f…

…or responsive testing.

Also added some bottom margin to tags.
  • Loading branch information...
1 parent 429faab commit 62e98d20c254236ce1989c11a4224eeb4f14534f @jonlongnecker jonlongnecker committed Jul 19, 2012
Showing with 46 additions and 1 deletion.
  1. +38 −0 responsive.html
  2. +8 −1 themes/plugins.jquery.com/style.css
View
38 responsive.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Responsive Design Testing</title>
+ <style>
+ body { margin: 20px; font-family: sans-serif; overflow-x: scroll; }
+ .wrapper { width: 6000px; }
+ .frame { float: left; }
+ h2 { margin: 0 0 5px 0; }
+ iframe { margin: 0 20px 20px 0; border: 1px solid #666; }
+ </style>
+</head>
+<body>
+ <div class="wrapper">
+ <div class="frame">
+ <h2>320 &times; 480 <small>(mobile)</small></h2>
+ <iframe src="http://stage.plugins.jquery.com/foo/" sandbox="allow-same-origin allow-forms" seamless width="320" height="480"></iframe>
+ </div>
+ <div class="frame">
+ <h2>480 &times; 640 <small>(small tablet)</small></h2>
+ <iframe src="http://stage.plugins.jquery.com/foo/" sandbox="allow-same-origin allow-forms" seamless width="480" height="640"></iframe>
+ </div>
+ <div class="frame">
+ <h2>768 &times; 1024 <small>(tablet - portrait)</small></h2>
+ <iframe src="http://stage.plugins.jquery.com/foo/" sandbox="allow-same-origin allow-forms" seamless width="768" height="1024"></iframe>
+ </div>
+ <div class="frame">
+ <h2>1024 &times; 768 <small>(tablet - landscape)</small></h2>
+ <iframe src="http://stage.plugins.jquery.com/foo/" sandbox="allow-same-origin allow-forms" seamless width="1024" height="768"></iframe>
+ </div>
+ <div class="frame">
+ <h2>1200 &times; 800 <small>(desktop)</small></h2>
+ <iframe src="http://stage.plugins.jquery.com/foo/" sandbox="allow-same-origin allow-forms" seamless width="1200" height="800"></iframe>
+ </div>
+ </div>
+</body>
+</html>
View
9 themes/plugins.jquery.com/style.css
@@ -133,6 +133,7 @@ Template: jquery
-o-border-radius: 3px;
border-radius: 3px;
background-color: #305e91;
+ margin-bottom: 10px;
}
.jquery_plugin li.tag[class^="icon-"]:before,
@@ -599,10 +600,16 @@ Template: jquery
@media all and (max-width: 1100px){
.jquery_plugin .plugin-main {
- width: 60%;
+ width: 65%;
}
}
+@media all and (max-width: 900px){
+ .jquery_plugin .plugin-main {
+ width: 60%;
+ }
+}
+
@media all and (max-width: 768px){
.jquery_plugin .plugin-main,

0 comments on commit 62e98d2

Please sign in to comment.