more responsive

css/menu.css

@@ -112,62 +112,7 @@ right: 20px;
 
 /******************RESPONSIVE MENU******************/
 
-@media (max-width: 1100px){
-    #navbar { letter-spacing: 0px!important; }
-	#navlist li { width: auto !important;}
-	
-}
-@media (min-width: 791px){
-    #navbar #responsive{ display: none; }
-}
-@media (max-width:790px){
-    #navbar #navlist{ display:none; }
 
-	#footer-outer
-{
-    background-color: #475A68;
-    font-family: 'Open Sans';
-    font-size: 26px;
-    color: #BCC9CC;
-    width: 100%;
-    height: 300px!important;
-    
-    
-}
-    #navbar{
-        display: table;
-        width: 70% !important;
-        margin: 0px auto !important;
-        padding-bottom: 10px;
-        font-family: 'Champagne and Limousine'!important;
-        font-size: 120%!important;    
-        color: #485260!important;
-        letter-spacing: 5px!important;
-    }
-    #responsive img{
-        width: 55px;
-        height: auto;
-    }
-    #responsive
-    {
-        text-transform: uppercase;
-        text-align:center;
-        width: 70%;
-        padding-bottom: 30px;
-        display: table-row;
-    }
-
-    #responsive li
-    {
-        vertical-align: middle;
-        display: table-cell;
-        text-align: center;
-        width: 0%;
-    }
-	#top_wrapper{
-	height: 70px!important;
-	}
-}
 
 /*************NAVBAR************/
 #top_wrapper
@@ -391,6 +336,7 @@ width: 60%;
 margin: 0 auto;
 
 }
+.clear{ clear:both;}
 div.img {
     margin: 15px;
     padding: 15px;
@@ -414,7 +360,74 @@ div.desc {
   margin: 5px;
 }
 
+@media screen and  (max-width: 1855px){
+	#gallery{ width: 70%; }
+}
+@media screen and  (max-width: 1867px){
+	#gallery{ width: 80%; }
+}
+@media screen and  (max-width: 1441px){
+	#gallery{ width: 90%; }
+}
+@media (max-width: 1100px){
+    #navbar { letter-spacing: 0px!important; }
+	#navlist li { width: auto !important;}
+	
+}
+@media (min-width: 791px){
+    #navbar #responsive{ display: none; }
+}
+@media (max-width:790px){
+    #navbar #navlist{ display:none; }
+
+#footer-outer
+{
+    background-color: #475A68;
+    font-family: 'Open Sans';
+    font-size: 26px;
+    color: #BCC9CC;
+    width: 100%;
+    height: 300px!important;
+    
+    
+}
+    #navbar{
+        display: table;
+        width: 70% !important;
+        margin: 0px auto !important;
+        padding-bottom: 10px;
+        font-family: 'Champagne and Limousine'!important;
+        font-size: 120%!important;    
+        color: #485260!important;
+        letter-spacing: 5px!important;
+    }
+    #responsive img{
+        width: 55px;
+        height: auto;
+    }
+    #responsive
+    {
+        text-transform: uppercase;
+        text-align:center;
+        width: 70%;
+        padding-bottom: 30px;
+        display: table-row;
+    }
 
+    #responsive li
+    {
+        vertical-align: middle;
+        display: table-cell;
+        text-align: center;
+        width: 0%;
+    }
+	#top_wrapper{
+	height: 70px!important;
+	}
+}
+@media screen and (max-width:820px){
+	div.img {float:none;margin:0;padding:0;width:100%;}
+}
 @media screen and (max-width:490px){
 	#gallery {width:100%;}
 	div.img {float:none;margin:0;padding:0;width:100%;}

graficas.php

@@ -74,55 +74,51 @@
 </div>
 
 <div id="gallery">
-	<div class="fila">
-		<div class="img">
-			<a target="_blank" href="Images/graficas/Hombres2014.jpg"><img src="Images/graficas/Hombres2014-thumb.jpg" width="300" height="420"></a>
-			<div class="desc">
-				<div class="titulos">
-					<a href="Images/graficas/Hombres2014.jpg">DESCARGAR</a>
-				</div>
+	<div class="img">
+		<a target="_blank" href="Images/graficas/Hombres2014.jpg"><img src="Images/graficas/Hombres2014-thumb.jpg" width="300" height="420"></a>
+		<div class="desc">
+			<div class="titulos">
+				<a href="Images/graficas/Hombres2014.jpg">DESCARGAR</a>
 			</div>
 		</div>
-		<div class="img">
-			<a target="_blank" href="Images/graficas/peelingVertical.jpg"><img src="Images/graficas/peelingVertical-thumb.jpg"  width="300" height="420"></a>
-			<div class="desc">
-				<div class="titulos">
-					<a href="Images/graficas/peelingVertical.jpg">DESCARGAR</a>
-				</div>
+	</div>
+	<div class="img">
+		<a target="_blank" href="Images/graficas/peelingVertical.jpg"><img src="Images/graficas/peelingVertical-thumb.jpg"  width="300" height="420"></a>
+		<div class="desc">
+			<div class="titulos">
+				<a href="Images/graficas/peelingVertical.jpg">DESCARGAR</a>
 			</div>
 		</div>
-		<div class="img">
-			<a target="_blank" href="Images/graficas/productos.jpg"><img src="Images/graficas/productos-thumb.jpg"  width="300" height="420"></a>
-			<div class="desc">
-				<div class="titulos">
-					<a href="Images/graficas/productos.jpg">DESCARGAR</a>
-				</div>
+	</div>
+	<div class="img">
+		<a target="_blank" href="Images/graficas/productos.jpg"><img src="Images/graficas/productos-thumb.jpg"  width="300" height="420"></a>
+		<div class="desc">
+			<div class="titulos">
+				<a href="Images/graficas/productos.jpg">DESCARGAR</a>
 			</div>
 		</div>
 	</div>
-	<div class="fila">
-		<div class="img">
-			<a target="_blank" href="Images/graficas/productos+chica.jpg"><img src="Images/graficas/productos+chica-thumb.jpg"  width="300" height="420"></a>
-			<div class="desc">
-				<div class="titulos">
-					<a href="Images/graficas/productos+chica.jpg">DESCARGAR</a>
-				</div>
+	<div class="img">
+		<a target="_blank" href="Images/graficas/productos+chica.jpg"><img src="Images/graficas/productos+chica-thumb.jpg"  width="300" height="420"></a>
+		<div class="desc">
+			<div class="titulos">
+				<a href="Images/graficas/productos+chica.jpg">DESCARGAR</a>
 			</div>
 		</div>
-		<div class="img">
-			<a target="_blank" href="Images/graficas/RepairEyeContour.jpg"><img src="Images/graficas/RepairEyeContour-thumb.jpg"  width="300" height="420"></a>
-			<div class="desc">
-				<div class="titulos">
-					<a href="Images/graficas/RepairEyeContour.jpg">DESCARGAR</a>
-				</div>
+	</div>
+	<div class="img">
+		<a target="_blank" href="Images/graficas/RepairEyeContour.jpg"><img src="Images/graficas/RepairEyeContour-thumb.jpg"  width="300" height="420"></a>
+		<div class="desc">
+			<div class="titulos">
+				<a href="Images/graficas/RepairEyeContour.jpg">DESCARGAR</a>
 			</div>
 		</div>
-		<div class="img">
-			<a target="_blank" href="Images/graficas/Monodosis2014.jpg"><img src="Images/graficas/Monodosis2014-thumb.jpg"  width="300" height="420"></a>
-			<div class="desc">
-				<div class="titulos">
-					<a href="Images/graficas/Monodosis2014.jpg">DESCARGAR</a>
-				</div>
+	</div>
+	<div class="img">
+		<a target="_blank" href="Images/graficas/Monodosis2014.jpg"><img src="Images/graficas/Monodosis2014-thumb.jpg"  width="300" height="420"></a>
+		<div class="desc">
+			<div class="titulos">
+				<a href="Images/graficas/Monodosis2014.jpg">DESCARGAR</a>
 			</div>
 		</div>
 	</div>