Difference between revisions of "Template:Wageningen UR/ResponsiveCSSv2"

 
(188 intermediate revisions by 2 users not shown)
Line 3: Line 3:
  
 
/*responsiveness media statements */
 
/*responsiveness media statements */
−
    /*When returning from mobile */     
+
       
−
     @media (min-width: 924px) {
+
    /*Switch to small banner*/     
 +
     @media (max-width: 1710px) {  
 +
      .sub-nav-item {
 +
            font-size: 0.9rem;
 +
        }
 +
    } 
  
−
        .MobileIconGlobal {
 
−
            display: none;
 
−
        }
 
−
    }
 
−
 
 
 
     /*Switch to small banner*/     
 
     /*Switch to small banner*/     
−
     @media (max-width: 1420px) {
+
     @media (max-width: 1630px) {
 
         /*whatever appears in the menu at the left either disappears or is now on top of the menu*/
 
         /*whatever appears in the menu at the left either disappears or is now on top of the menu*/
−
          
+
         .sub-nav-item {
−
        .nav-item {
+
             font-size: 1.1rem;
−
             font-size: 1.2rem;
+
         }      
−
         }
+
  
 
         .Menu-Left-Icon {
 
         .Menu-Left-Icon {
 
             display: none;
 
             display: none;
 +
            height:70px;
 +
            max-width:100%;
 
         }
 
         }
 +
       
 
         .MenuIconSmall {
 
         .MenuIconSmall {
 
             display: block;
 
             display: block;
Line 42: Line 44:
 
         }     
 
         }     
 
   }
 
   }
 +
 
 
    
 
    
 
     /*switch to no banner */
 
     /*switch to no banner */
−
     @media (max-width: 1200px) {
+
     @media (max-width: 1520px) {
 +
 
 
       .MenuLeft {
 
       .MenuLeft {
−
           display:none
+
           width:4%;
 
         }
 
         }
  
−
         .Menucenter {
+
         .MenuCenter {
−
           width:100% !important;
+
           width:96%;
 
         }
 
         }
−
+
        .MenuIconSmall {
−
         .project-li a {
+
          width:100%;
−
            padding-left:0.5rem;  
+
          height:auto;
 +
        }
 +
        .MenuIconSmall img {
 +
              width:100%;
 +
          }
 +
          
 +
      .TopMenuButtonColumn ul li {
 +
          margin-right:8px;
 
         }
 
         }
 +
        .project-li a {
 +
            padding-left:8px; 
 +
        }   
 +
 +
        .nav-item {
 +
            font-size: 1.1rem;
 +
        } 
 
         .sub-nav-item {
 
         .sub-nav-item {
−
             font-size: 0.8rem;
+
             font-size: 0.9rem;
−
        }
+
        }
  
−
      }
+
        .SubMenuButtonColumn ul li {
−
 
+
            margin-right:8px;         
−
    /*Small menu text with small banner */    
+
        }    
−
    @media (max-width: 1110px) {
+
       
 +
        #SideMenu-Wrapper {
 +
              width:160px;
 +
              left:-160px;
 +
        }
 +
       
 +
        #SideMenu {
 +
            width:160px;
 +
        }       
 +
   
 +
        .menu-head {           
 +
              margin:0;
 +
        }
 
          
 
          
 +
        .menu-head h4 {
 +
            font-size:1rem;
 +
              padding-top:0.4rem!important;
 +
              padding-bottom:0.4rem!important;
 +
          }
 +
    }       
 +
 
 +
    @media (max-width: 1320px) {
 +
 +
      .nav-item {
 +
            font-size: 0.9rem;
 +
        } 
 
         .sub-nav-item {
 
         .sub-nav-item {
−
             font-size: 0.75rem;
+
             font-size: 0.65rem;
−
        }
+
        }
−
   
+
 
     }
 
     }
−
 
  
 
     /*Mobile devices*/     
 
     /*Mobile devices*/     
−
     @media screen and (max-width: 900px) {
+
     @media screen and (max-width: 1000px) {
 
         body,
 
         body,
 
         html {
 
         html {
Line 81: Line 122:
 
         }
 
         }
 
          
 
          
 +
      .Main-Border {
 +
            padding-left:10px!important;
 +
            padding-right:10px!important;
 +
        }
 +
 
         body p {
 
         body p {
−
             font-size:12px !important;
+
             font-size:16sp!important;
 
         }
 
         }
  
 +
        .nested-ordered-list ol {
 +
            margin-left:1rem!important;         
 +
        }
 +
 +
        .table {
 +
            margin:0!important;
 +
            font-size:12px!important;
 +
            overflow: auto;
 +
            overflow-y: hidden;
 +
        }
 +
 +
        /* redo all titles for mobile */
 +
        h1 {
 +
        font-size:32sp!important;
 +
        margin-bottom:12sp!important;
 +
        padding:0!important;
 +
        }
 +
 +
        h2 {
 +
        font-size:24sp!important;
 +
        margin-bottom:12sp!important;
 +
        padding:0!important;
 +
        }
 +
 +
        h3 {
 +
          font-size:22sp!important;
 +
          margin-bottom:8sp!important;
 +
          padding:0!important;
 +
        }
 +
 +
        h4 {
 +
          font-size:20sp!important;
 +
          margin-bottom:8sp!important;
 +
          padding:0!important;
 +
        }
 +
       
 +
        h5 {
 +
          font-size:18sp!important;
 +
          padding:0!important;
 +
        }
 +
 +
      /* for accordion */
 +
        .col-xs-11 {
 +
          padding-left:0!important;
 +
          padding-right:0!important;
 +
        }
 +
        .col-xs-1 {
 +
          padding-left:0!important;
 +
          padding-right:0!important;
 +
        }       
 +
       
  
 
         /*Hide normal menu*/         
 
         /*Hide normal menu*/         
Line 113: Line 210:
 
         }
 
         }
 
         #SubMenuButtonWrapper ul {
 
         #SubMenuButtonWrapper ul {
 +
            display: none;
 +
        }
 +
       
 +
        #SideMenu {
 
             display: none;
 
             display: none;
 
         }
 
         }
Line 128: Line 229:
 
             display: none;
 
             display: none;
 
         }
 
         }
−
       
+
 
−
        /*make the title divs of accordion stay vertical aligned */
+
        #UpButton {
−
        .acco-col {
+
            width:64px;
−
            padding-left: 0 !important;
+
            height:64px;
−
            padding-right: 0 !important;
+
            right:10%;
−
        }
+
        }
−
   
+
 
     }
 
     }
  
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 04:34, 19 November 2017