Browse Source

fixed responsive for medium

Bachir Soussi Chiadmi 7 years ago
parent
commit
44791ccf96

+ 13 - 13
sites/all/themes/figureslibres/clameurs/css/dist/styles.css

@@ -333,7 +333,7 @@ input {
       letter-spacing: normal; }
     .node-thematique .content article.main {
       overflow: hidden; }
-      @media only screen and (min-width: 64.0625em) {
+      @media only screen and (min-width: 40.0625em) {
         .node-thematique .content article.main {
           display: inline-block;
           vertical-align: top;
@@ -368,7 +368,7 @@ input {
           transition: height 0.5s ease-in-out;
           background-color: #fff;
           overflow: hidden; }
-          @media only screen and (min-width: 85.4375em) {
+          @media only screen and (min-width: 40.0625em) {
             .node-thematique .content article.main .field-name-body .value {
               display: block; } }
           .node-thematique .content article.main .field-name-body .value p {
@@ -377,7 +377,7 @@ input {
             line-height: 1.3;
             margin: 0;
             background-color: #fff; }
-        @media only screen and (min-width: 64.0625em) {
+        @media only screen and (min-width: 40.0625em) {
           .node-thematique .content article.main .field-name-body:hover .value {
             height: 700px; } }
       .node-thematique .content article.main .group-video {
@@ -426,18 +426,18 @@ input {
               font-weight: 500;
               font-size: 2em;
               margin: 0; }
-        @media only screen and (min-width: 64.0625em) {
+        @media only screen and (min-width: 40.0625em) {
           .node-thematique .content article.main .group-video:hover .group-description .field-name-field-description {
             opacity: 1; } }
     .node-thematique .content aside.right {
       margin-top: 1.2em; }
-      @media only screen and (min-width: 64.0625em) {
+      @media only screen and (min-width: 40.0625em) {
         .node-thematique .content aside.right {
           display: inline-block;
           vertical-align: top;
           width: 30.5%;
           margin-top: 0; } }
-      @media only screen and (min-width: 64.0625em) {
+      @media only screen and (min-width: 40.0625em) {
         .node-thematique .content aside.right .field-name-field-eclairages {
           padding-left: 1em; } }
       .node-thematique .content aside.right .field-name-field-eclairages .field-items {
@@ -447,14 +447,14 @@ input {
         flex-flow: row wrap;
         -ms-flex-pack: start;
         justify-content: flex-start; }
-        @media only screen and (min-width: 64.0625em) {
+        @media only screen and (min-width: 40.0625em) {
           .node-thematique .content aside.right .field-name-field-eclairages .field-items {
             display: block; } }
         .node-thematique .content aside.right .field-name-field-eclairages .field-items > .field-item {
           display: block;
           background-color: #fff;
           width: 33%; }
-          @media only screen and (min-width: 64.0625em) {
+          @media only screen and (min-width: 40.0625em) {
             .node-thematique .content aside.right .field-name-field-eclairages .field-items > .field-item {
               width: auto; }
               .node-thematique .content aside.right .field-name-field-eclairages .field-items > .field-item:not(:last-child) {
@@ -475,7 +475,7 @@ input {
             width: 90%;
             height: 80%;
             margin: 5px; }
-            @media only screen and (min-width: 64.0625em) {
+            @media only screen and (min-width: 40.0625em) {
               .node-thematique .content aside.right .node-documentair .content .group-txt {
                 margin: 15px; } }
             .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-field-doc {
@@ -507,7 +507,7 @@ input {
           .node-thematique .content aside.right .node-documentair .content .group-video a {
             display: block;
             line-height: 0; }
-        @media only screen and (min-width: 64.0625em) {
+        @media only screen and (min-width: 40.0625em) {
           .node-thematique .content aside.right .node-documentair:not(.en_attente):hover .group-txt .field-name-field-doc {
             background-color: transparent; }
           .node-thematique .content aside.right .node-documentair:not(.en_attente):hover .group-txt .field-name-title-field {
@@ -526,7 +526,7 @@ input {
             opacity: 0.8; }
     .node-thematique .content aside.bottom {
       padding-top: 1.2em; }
-      @media only screen and (min-width: 64.0625em) {
+      @media only screen and (min-width: 40.0625em) {
         .node-thematique .content aside.bottom {
           padding-top: 0.6em; } }
       .node-thematique .content aside.bottom .field-name-field-episodes .field-label {
@@ -546,7 +546,7 @@ input {
         flex-flow: row wrap;
         -ms-flex-pack: start;
         justify-content: flex-start; }
-        @media only screen and (min-width: 64.0625em) {
+        @media only screen and (min-width: 40.0625em) {
           .node-thematique .content aside.bottom .field-name-field-episodes > .field-items {
             -ms-flex-flow: row nowrap;
             flex-flow: row nowrap;
@@ -556,7 +556,7 @@ input {
           display: block;
           background-color: #fff;
           width: 50%; }
-          @media only screen and (min-width: 64.0625em) {
+          @media only screen and (min-width: 40.0625em) {
             .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item {
               width: 19%; } }
           .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content {

+ 13 - 13
sites/all/themes/figureslibres/clameurs/css/styles.scss

@@ -449,7 +449,7 @@ $header_height_large:400px;
 		// /_/ /_/ /_/\__,_/_/_/ /_/
 		article.main{
 
-			@media #{$large-up} {
+			@media #{$medium-up} {
 				display: inline-block;
 				vertical-align: top;
 				width:$main_w;
@@ -480,7 +480,7 @@ $header_height_large:400px;
         }
 				.value{
 					display:none;
-					@media #{$xlarge-up} {
+					@media #{$medium-up} {
 						display: block;
 					}
 					position:absolute;
@@ -493,7 +493,7 @@ $header_height_large:400px;
             background-color: #fff;
 					}
 				}
-				@media #{$large-up} {
+				@media #{$medium-up} {
 					&:hover{
 						// .summary{background-color: #fff;}
 						.value{
@@ -541,7 +541,7 @@ $header_height_large:400px;
 						}
 					}
 				}
-        @media #{$large-up} {
+        @media #{$medium-up} {
   				&:hover .group-description{
   					// background-color: rgba(255,255,255,0.9);
   					// .field-name-field-ecouter{
@@ -561,28 +561,28 @@ $header_height_large:400px;
 		aside.right{
 			margin-top:$gouttiere;
 
-			@media #{$large-up} {
+			@media #{$medium-up} {
 				display: inline-block;
 				vertical-align: top;
 				width: $right_w;
 				margin-top: 0;
 			}
 			.field-name-field-eclairages{
-        @media #{$large-up} {
+        @media #{$medium-up} {
           padding-left:1em;
         }
         .field-items{
           display: flex;
           flex-flow: row wrap;
           justify-content: flex-start;
-          @media #{$large-up} {
+          @media #{$medium-up} {
             display: block;
           }
           &>.field-item{
             display: block;
             background-color: #fff;
             width:33%;
-            @media #{$large-up} {
+            @media #{$medium-up} {
               width:auto;
               &:not(:last-child){
       					padding-bottom: $gouttiere;
@@ -604,7 +604,7 @@ $header_height_large:400px;
 						position:absolute; z-index: 2; overflow: hidden;
 						top:0; left:0; width:90%; height:80%;
             margin:5px;
-            @media #{$large-up} {
+            @media #{$medium-up} {
 						  margin:15px;
             }
 						// opacity: 0;
@@ -627,7 +627,7 @@ $header_height_large:400px;
 					.group-video img{ width:100%; height:auto;}
 					.group-video a{ display: block; line-height: 0;}
 				}
-        @media #{$large-up} {
+        @media #{$medium-up} {
   				&:not(.en_attente):hover .group-txt{
   					.field-name-field-doc{background-color: transparent;}
   					.field-name-title-field{opacity: 1;}
@@ -657,7 +657,7 @@ $header_height_large:400px;
 		//    /_/
 		aside.bottom{
 			padding-top: $gouttiere;
-			@media #{$large-up} {
+			@media #{$medium-up} {
 				padding-top: $gouttiere*0.5;
 			}
 			.field-name-field-episodes{
@@ -671,7 +671,7 @@ $header_height_large:400px;
           display: flex;
           flex-flow: row wrap;
           justify-content: flex-start;
-					@media #{$large-up} {
+					@media #{$medium-up} {
             flex-flow: row nowrap;
             justify-content: space-between;
 					}
@@ -679,7 +679,7 @@ $header_height_large:400px;
 						display: block;
 						background-color: #fff;
             width:50%;
-						@media #{$large-up} {
+						@media #{$medium-up} {
 							width:19%;
 						}
 						.node-episode{