Responsive padding

7

Thanks! , i will used it…

Then you are able to just change that one font-size of the html on smaller screens. All paddings and margins will change with it in proportion to that smaller or larger font.

when write one time on the file CSS file, but not on the Responsive Media Query file, will it change in proportion to that smaller , or should also write on the Responsive Media Query file ?

You can check the different css units on the w3schools site and try it. Just put a padding in the example and see how it works out with px, rem or em.

I used emf for mine Media Query and some time for Elements… here a example how have my Media Query file, now…

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops

 @media (min-width: 80.0625em)

*/

@media (min-width: 80.0625em) {
  
   body {
       display: grid;
       display: -ms-grid; 
       background-color: #eaf6e5;
       grid-row-gap: 5px;
       grid-template:
        "header header header" auto
        "nav nav nav" auto
        "main main gap1" 1em
        "main main werb" 11em 
        "main main gap2" 5em
        "main main info" 1fr
        "footer footer footer" auto / 8% 64% 28%;
       
       -ms-grid-columns: 8% 64% 28%;
       -ms-grid-row:  120px 80px 103px 200px 110px 90px; 
       -ms-grid-gap: 5px;
    }
    
    
    
    
    
   
  
    nav a {
      color: black;
      text-decoration: none;
	  display: inline-block;
	  padding: 10px 8px 10px;
	  font-size: 20px;
	  font-family:  Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
    }
    
    .dropdown-content a {
       font-size: 15px;
       
       
    }
    
    .dropdown:hover .dropdown-content {top: 41px; }
    .new-link:hover .new-content { top: 41px}
    .languag:hover .languages {top: 41px;}
    
    
    
    .new-content a { padding: 12px 50px; }
    .languages a { padding: 12px 34px; } 
    
    
    .dropdown-content a { -webkit-padding-start: 22px; } 
    .new-content a { -webkit-padding-start:  48px;}
    .languages a {-webkit-padding-start:  39px;}
   
     
             
    article {margin-left: 4px;}     
   
    
    body > main {
       grid-area: main;    
        box-sizing: border-box;    /* margin wo der test anfang    */  
        padding: 7px;             /* margin wo der test anfang , padding für den margin    */ 
        height: 100%;
    }
    body > aside  {
        
       grid-area: info;
        display: block;
        display: -ms-grid;
        -ms-grid-column: 3;
        -ms-grid-row: 3;
        margin: 1px;
        background-color: #d2f3c6;
        margin-top: 60px;
        margin-left: 150px;
    }
    
          
          
          /* contac big  */
    
    .mellat {padding-bottom: 120px;}   
    
    
    
    
          
    .seste {display:  none;}
    .siebte{display: none; }
    .erste-unten {display: none; }
    .ipad-lange {display: none; }
    
}
  

header {
    
    grid-area: header;
    background-image: url('Photo/view.webp');  
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 140px;
 
    -ms-grid-column: 1/3;
    -ms-grid-column-span: 3;
    -ms-grid-row: 1;   
    
}


nav {
	grid-area: nav;
	-ms-grid-column: 1/3;
    -ms-grid-column-span: 3;
    -ms-grid-row: 2;

   background-color: #d2f5c4;
   margin: 1px;

}



main {
    
  grid-area: main;
    display: block; 
    -ms-grid-column: 1/2;
    -ms-grid-column-span: 2; 
    -ms-grid-row: 3;
   
    background-color: #e1f2d9;
    margin: 2px;
    margin-left: 19px;
    
    
   
    
}  


/*  Werbung Recht   */

.drei {
    
  display: block;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 160px;
  height: 600px;
  margin-top: 60px;
  margin-left: 130px;

  

} 

/* Erste Link   */


.erste {
    
    display: inline;
    width: 728px;
    height: 90px;
    margin-left: 20px;
    
}





footer {
	grid-area: footer;
	-ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 6;
    -ms-grid-row-span: 6;
    
    background-color: #99ee7a;

}