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

 
(219 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: 1370px) {
+
     @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 23: Line 29:
  
 
         .TopMenuButtonColumn ul li {
 
         .TopMenuButtonColumn ul li {
−
           margin-right:0.5rem;
+
           margin-right:1.5rem;
 
         }
 
         }
  
−
         #Menucenter {
+
         .MenuCenter {
−
          width:94%;
+
            width:94% !important;
 
         }
 
         }
  
−
         #MenuLeft {
+
         .MenuLeft {
−
           width:6%;
+
           width:6% !important;
−
         }
+
         }  
−
+
  
 
         #breadcrumb-wrapper {
 
         #breadcrumb-wrapper {
 
             margin-left: 10px;
 
             margin-left: 10px;
−
         }
+
         }  
−
    }
+
 
   }
 
   }
 +
 
 
    
 
    
 +
    /*switch to no banner */
 +
    @media (max-width: 1520px) {
 +
 +
      .MenuLeft {
 +
          width:4%;
 +
        }
 +
 +
        .MenuCenter {
 +
          width:96%;
 +
        }
 +
        .MenuIconSmall {
 +
          width:100%;
 +
          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 {
 +
            font-size: 0.9rem;
 +
        } 
 +
 +
        .SubMenuButtonColumn ul li {
 +
            margin-right:8px;         
 +
        }   
 +
       
 +
        #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 {
 +
            font-size: 0.65rem;
 +
        } 
 +
 +
    }
 +
 
     /*Mobile devices*/     
 
     /*Mobile devices*/     
−
     @media screen and (max-width: 860px) {
+
     @media screen and (max-width: 1000px) {
 
         body,
 
         body,
 
         html {
 
         html {
Line 50: 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*/         
−
         #MainMenu {
+
         #Main-Menu {
 
             display: none;
 
             display: none;
 
         }
 
         }
 +
 +
        .TopMenuBackground {
 +
            display:none;
 +
        }
 +
 +
        .SubMenuBackground {
 +
            display:none;
 +
        }
 +
 
         /*Do stuff with mobile*/         
 
         /*Do stuff with mobile*/         
 
         .MobileIconGlobal {
 
         .MobileIconGlobal {
Line 73: Line 210:
 
         }
 
         }
 
         #SubMenuButtonWrapper ul {
 
         #SubMenuButtonWrapper ul {
 +
            display: none;
 +
        }
 +
       
 +
        #SideMenu {
 
             display: none;
 
             display: none;
 
         }
 
         }
  
 
       /*Adjust position of our content */
 
       /*Adjust position of our content */
−
       #OurContent-Wrapper {
+
       .OurContent {
 
             position:fixed;
 
             position:fixed;
−
             top:100px;
+
            width:100%;
 +
             top:108px;
 
             left:0;
 
             left:0;
 
             margin:0;
 
             margin:0;
Line 87: 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