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

…or responsive testing. Also added some bottom margin to tags.
jquery · Jul 19, 2012 · 62e98d2 · 62e98d2
1 parent 429faab
commit 62e98d2
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 1 deletion.
diff --git a/responsive.html b/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>
diff --git a/themes/plugins.jquery.com/style.css b/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,