From 0f23ad0e1f669a0543da938b83f2be14eec7c9ae Mon Sep 17 00:00:00 2001
From: Rolf Allard van Hagen <ravanhagen@gmail.com>
Date: Wed, 20 Jun 2018 02:42:59 +0200
Subject: [PATCH] Move @media block

The position of the @media block, containing a padding rule for content div, causes iframes on screens below 1024px wide to get a padding too. Moving it to above the .featherlight-iframe .featherlight-content section allows iframed content to keep its non-border style on smaller screen sizes too.
---
 src/featherlight.css | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/featherlight.css b/src/featherlight.css
index 3de1ba5..1164f34 100644
--- a/src/featherlight.css
+++ b/src/featherlight.css
@@ -72,6 +72,19 @@ html.with-featherlight {
 	white-space: normal;
 }
 
+/* handling phones and small screens */
+@media only screen and (max-width: 1024px) {
+	.featherlight .featherlight-content {
+		/* dimensions: maximize lightbox width for small screens */
+		margin-left: 0;
+		margin-right: 0;
+		max-height: 98%;
+
+		padding: 10px 10px 0;
+		border-bottom: 10px solid transparent;
+	}
+}
+
 /* contains the content */
 .featherlight .featherlight-inner {
 	/* make sure its visible */
@@ -118,7 +131,6 @@ html.with-featherlight {
 	width: 100%;
 }
 
-
 .featherlight-iframe .featherlight-content {
 	/* removed the border for image croping since iframe is edge to edge */
 	border-bottom: 0;
@@ -137,19 +149,6 @@ html.with-featherlight {
 	box-sizing: border-box;
 }
 
-/* handling phones and small screens */
-@media only screen and (max-width: 1024px) {
-	.featherlight .featherlight-content {
-		/* dimensions: maximize lightbox with for small screens */
-		margin-left: 0;
-		margin-right: 0;
-		max-height: 98%;
-
-		padding: 10px 10px 0;
-		border-bottom: 10px solid transparent;
-	}
-}
-
 /* hide non featherlight items when printing */
 @media print {
 	html.with-featherlight > * > :not(.featherlight) {