Add responsivity to banner image at program page (issue #34)

Leonardo Merlin
1 parent fd672a82
Showing 1 changed file with 19 additions and 5 deletions Show diff stats
src/app/pages/programas/programas.scss
@@ -46,14 +46,20 @@
             background-size: cover;
             background-repeat: no-repeat;
  
+            @media screen and (max-width: $screen-lg) {
+                height: 300px;
+            }
  
+            @media screen and (max-width: $screen-md) {
+                height: 300px;
+            }
  
-            @media screen and (max-width: $screen-xs) {
-                // height: 15px;
+            @media screen and (max-width: $screen-sm) {
+                height: 260px;
+            }
  
-                // .video {
-                //     height: 290px;
-                // }
+            @media screen and (max-width: $screen-xs) {
+                height: 200px;
             }
         }
  
@@ -211,6 +217,14 @@
         top: 50%;
         margin-top: -100px;
         transform: scale(1);
+
+        @media screen and (max-width: $screen-sm) {
+            transform: scale(0.8);
+        }
+
+        @media screen and (max-width: $screen-xs) {
+            transform: scale(0.7);
+        }
     }
  
     #section-archived-banner {
...	...	@@ -46,14 +46,20 @@
46	46	background-size: cover;
47	47	background-repeat: no-repeat;
48	48
	49	+ @media screen and (max-width: $screen-lg) {
	50	+ height: 300px;
	51	+ }
49	52
	53	+ @media screen and (max-width: $screen-md) {
	54	+ height: 300px;
	55	+ }
50	56
51		- @media screen and (max-width: $screen-xs) {
52		- // height: 15px;
	57	+ @media screen and (max-width: $screen-sm) {
	58	+ height: 260px;
	59	+ }
53	60
54		- // .video {
55		- // height: 290px;
56		- // }
	61	+ @media screen and (max-width: $screen-xs) {
	62	+ height: 200px;
57	63	}
58	64	}
59	65
...	...	@@ -211,6 +217,14 @@
211	217	top: 50%;
212	218	margin-top: -100px;
213	219	transform: scale(1);
	220	+
	221	+ @media screen and (max-width: $screen-sm) {
	222	+ transform: scale(0.8);
	223	+ }
	224	+
	225	+ @media screen and (max-width: $screen-xs) {
	226	+ transform: scale(0.7);
	227	+ }
214	228	}
215	229
216	230	#section-archived-banner {
...	...