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

 
(47 intermediate revisions by 2 users not shown)
Line 23: Line 23:
 
             max-width:100%;
 
             max-width:100%;
 
         }
 
         }
         .Menu-Left-Icon a {
+
          
            display: none;
+
            height:70px;
+
            max-width:100%;
+
        }
+
        .Menu-Left-Icon img {
+
            display: none;
+
            height:70px;
+
            max-width:100%;
+
        }
+
 
+
 
         .MenuIconSmall {
 
         .MenuIconSmall {
 
             display: block;
 
             display: block;
Line 58: Line 48:
 
     /*switch to no banner */
 
     /*switch to no banner */
 
     @media (max-width: 1520px) {
 
     @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;   
 
         }     
 
         }     
  
         .SubMenuButtonColumn ul li {
+
         .nav-item {
             margin-right:0.6rem;          
+
             font-size: 1.1rem;
         }  
+
        } 
 +
         .sub-nav-item {
 +
            font-size: 0.9rem;
 +
        }
  
      .SubMenuButtonColumn ul li a{
+
        .SubMenuButtonColumn ul li {
             font-size: 0.7rem;          
+
             margin-right:8px;        
 
         }     
 
         }     
        .SubMenuButtonColumn ul li a {
 
            font-size: 0.8rem;           
 
        }       
 
 
          
 
          
 
         #SideMenu-Wrapper {
 
         #SideMenu-Wrapper {
               width:120px;  
+
               width:160px;  
               left:-120px;
+
               left:-160px;
 
         }  
 
         }  
 
          
 
          
 
         #SideMenu {
 
         #SideMenu {
             width:120px;  
+
             width:160px;  
 
         }         
 
         }         
 
      
 
      
Line 102: Line 100:
 
               padding-bottom:0.4rem!important;
 
               padding-bottom:0.4rem!important;
 
           }
 
           }
 
        .sidebar-nav li a {
 
            font-size:0.7rem;
 
            padding-top: 0.25rem;       
 
            padding-left: 0.5rem;
 
            padding-right: 0.25rem;
 
        }
 
 
     }         
 
     }         
 +
 
 +
    @media (max-width: 1320px) {
  
 
+
      .nav-item {
      }
+
             font-size: 0.9rem;
 
+
        }
    /*Small menu text without bordered main page */   
+
         .sub-nav-item {
    @media (max-width: 1300px) {
+
             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: 1px) {
+
     @media screen and (max-width: 1000px) {
 
         body,
 
         body,
 
         html {
 
         html {
Line 143: 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 151: 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 239: Line 229:
 
             display: none;
 
             display: none;
 
         }
 
         }
 +
 +
        #UpButton {
 +
            width:64px;
 +
            height:64px;
 +
            right:10%;
 +
        }
 
     }
 
     }
  
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 04:34, 19 November 2017