From 62e98d20c254236ce1989c11a4224eeb4f14534f Mon Sep 17 00:00:00 2001 From: Jonathan Longnecker Date: Thu, 19 Jul 2012 12:22:00 -0400 Subject: [PATCH] Added a temporary html page that shows the site at different widths for responsive testing. Also added some bottom margin to tags. --- responsive.html | 38 +++++++++++++++++++++++++++++ themes/plugins.jquery.com/style.css | 9 ++++++- 2 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 responsive.html diff --git a/responsive.html b/responsive.html new file mode 100644 index 00000000..559da254 --- /dev/null +++ b/responsive.html @@ -0,0 +1,38 @@ + + + + + Responsive Design Testing + + + +
+
+

320 × 480 (mobile)

+ +
+
+

480 × 640 (small tablet)

+ +
+
+

768 × 1024 (tablet - portrait)

+ +
+
+

1024 × 768 (tablet - landscape)

+ +
+
+

1200 × 800 (desktop)

+ +
+
+ + \ No newline at end of file diff --git a/themes/plugins.jquery.com/style.css b/themes/plugins.jquery.com/style.css index 489085aa..b79526c6 100755 --- 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,