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

 
(88 intermediate revisions by 2 users not shown)
Line 5: Line 5:
 
          
 
          
 
     /*Switch to small banner*/     
 
     /*Switch to small banner*/     
−
     @media (max-width: 1630px) {   
+
     @media (max-width: 1710px) {   
 
       .sub-nav-item {
 
       .sub-nav-item {
−
             font-size: 0.8rem;
+
             font-size: 0.9rem;
 
         }
 
         }
−
     }
+
     }  
  
 
     /*Switch to small banner*/     
 
     /*Switch to small banner*/     
−
     @media (max-width: 1490px) {
+
     @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 {
 +
            font-size: 1.1rem;
 +
        }       
 +
 
 
         .Menu-Left-Icon {
 
         .Menu-Left-Icon {
 
             display: none;
 
             display: none;
 +
            height:70px;
 +
            max-width:100%;
 
         }
 
         }
 +
       
 
         .MenuIconSmall {
 
         .MenuIconSmall {
 
             display: block;
 
             display: block;
Line 38: Line 44:
 
         }     
 
         }     
 
   }
 
   }
 +
 
 
    
 
    
 
     /*switch to no banner */
 
     /*switch to no banner */
−
     @media (max-width: 1310px) {
+
     @media (max-width: 1520px) {
 +
 
 
       .MenuLeft {
 
       .MenuLeft {
−
           display:none
+
           width:4%;
 
         }
 
         }
  
 
         .MenuCenter {
 
         .MenuCenter {
−
           width:100% !important;
+
           width:96%;
 
         }
 
         }
 +
        .MenuIconSmall {
 +
          width:100%;
 +
          height:auto;
 +
        }
 +
        .MenuIconSmall img {
 +
              width:100%;
 +
          }
 
          
 
          
−
        .TopMenuButtonColumn ul li {
+
      .TopMenuButtonColumn ul li {
−
           margin-right:0.8rem;
+
           margin-right:8px;
 
         }
 
         }
 
         .project-li a {
 
         .project-li a {
−
             padding-left:0.5rem;   
+
             padding-left:8px;   
 
         }     
 
         }     
 +
 +
        .nav-item {
 +
            font-size: 1.1rem;
 +
        } 
 +
        .sub-nav-item {
 +
            font-size: 0.9rem;
 +
        } 
  
 
         .SubMenuButtonColumn ul li {
 
         .SubMenuButtonColumn ul li {
−
             margin-right:0.6rem;          
+
             margin-right:8px;        
 
         }     
 
         }     
−
 
+
       
−
      .SubMenuButtonColumn ul li a{
+
        #SideMenu-Wrapper {
−
            font-size: 0.7rem;          
+
              width:160px;
−
         }  
+
              left:-160px;
−
         .SubMenuButtonColumn ul li a {
+
         }  
−
             font-size: 0.8rem;          
+
       
−
        }        
+
        #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;
−
    /*Small menu text without bordered main page */   
+
        }
−
    @media (max-width: 1130px) {
+
         .sub-nav-item {
−
 
+
             font-size: 0.65rem;
−
        .SubMenuButtonColumn ul li {
+
         }
−
            margin-right:0.3rem;
+
−
        }
+
−
        .SubMenuButtonColumn ul li a {
+
−
             font-size: 0.7rem;          
+
−
        }
+
−
        /*remove white page on background */
+
−
         .Main-Border {
+
−
             box-shadow:none!important;
+
−
            padding:0!important;
+
−
        }
+
−
        #mw-content-text {
+
−
            background-image:none!important;
+
−
         }
+
−
     
+
 
     }
 
     }
  
 
     /*Mobile devices*/     
 
     /*Mobile devices*/     
−
     @media screen and (max-width: 1050px) {
+
     @media screen and (max-width: 1000px) {
 
         body,
 
         body,
 
         html {
 
         html {
Line 99: Line 122:
 
         }
 
         }
 
          
 
          
 +
      .Main-Border {
 +
            padding-left:10px!important;
 +
            padding-right:10px!important;
 +
        }
 +
 
         body p {
 
         body p {
 
             font-size:16sp!important;
 
             font-size:16sp!important;
Line 107: Line 135:
 
         }
 
         }
  
 +
        .table {
 +
            margin:0!important;
 +
            font-size:12px!important;
 +
            overflow: auto;
 +
            overflow-y: hidden;
 +
        }
  
−
      /* redo all titles for mobile */
+
        /* redo all titles for mobile */
 
         h1 {
 
         h1 {
 
         font-size:32sp!important;
 
         font-size:32sp!important;
Line 161: Line 195:
 
             display:none;
 
             display:none;
 
         }
 
         }
−
 
−
        /*hide sidemenu /*
 
−
        #SideMenu {
 
−
            display:none;
 
−
        }
 
  
 
         /*Do stuff with mobile*/         
 
         /*Do stuff with mobile*/         
Line 181: Line 210:
 
         }
 
         }
 
         #SubMenuButtonWrapper ul {
 
         #SubMenuButtonWrapper ul {
 +
            display: none;
 +
        }
 +
       
 +
        #SideMenu {
 
             display: none;
 
             display: none;
 
         }
 
         }
Line 195: Line 228:
 
         #breadcrumb-wrapper {
 
         #breadcrumb-wrapper {
 
             display: none;
 
             display: none;
−
         }    
+
         }
−
                     
+
 
−
   
+
        #UpButton {
 +
            width:64px;
 +
            height:64px;
 +
            right:10%;
 +
        }
 
     }
 
     }
  
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 04:34, 19 November 2017