html: footer in the page header

I'm sorry for my English….

Try as here to tell the footer to keep where it belongs, without it happening …
In my CSS I have Consultation of different media (desktop, tablet and smartphone), now to test the media query for Ipad 5, I have to build my website with Grid Layout.
My HTML file:

 









    mmmmm
      

    
    
    
    
    
    










 




















linuxusers.net: Linux und Mehr © 2019. Alle Rechte vorbehalten.

Common Creative Symbol

Diese Arbeit unterliegt den Bestimmungen einer Creative Commons Attribution-Noncommercial 4.0 International license. Der Inhalt dieser Website kann ohne unsere Erlaubnis weder online noch offline erneut veröffentlicht werden.

In Myself Css and Media query I have this file,

@media only screen and (max-width: 30.82em) 
                   and (min-width: 15em) 
                   and (orientation: landscape) {

    body {
       display: 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" 3em
        "main main info" 1fr
        "footer footer footer" auto / 8% 64% 28%;



    }
    header { 

     grid-area: header;
      background-image: url('/Photo/night.JPG');
      background-repeat: no-repeat;
      background-size: 100% auto;
      width: 100%;
      height: 60px;
      margin-bottom: 2px; 

    }



    body > main {
    grid-area: main;     
     position: relative;
     min-height: 100vh;

    }
    footer#copry { 
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;  
    }

    body > main {
      grid-area: main;    
       box-sizing: border-box;    /* margin wo der test anfang    */  
       padding: 5px;             /* margin wo der test anfang , padding für den margin    */ 
       font-size: 16px;
       margin-right: 2px;
       margin-left: 14px;

    }

    article {margin-left: 2px;}

    nav ul {list-style-type: none;  flex: 1 0 auto; padding: 0px 10px 0px 9px;}
    nav ul:nth-of-type(2) { text-align: left; padding: 0px 0px 0px 2px}


    nav a { font-size: 13px; }

    /*  new-links    */

   .dropdown:hover .dropdown-content {top: 31px; }
   .new-link:hover .new-content { top: 31px}  
   .languag:hover .languages {top: 31px;}  

   .dropdown-content a { -webkit-padding-start: 15px; } 
   .new-content a { -webkit-padding-start:  45px;}
   .languages a {-webkit-padding-start:  35px;}     



    .dropdown-content a { padding: 10px 8px; font-size: 13px; }

    .link_change ul {margin-top: 20px;} 


    .new-content a { padding: 10px 24px; font-size: 13px;}  

    .languages a { padding: 10px 21px; font-size: 13px; }


    #name {font-size: 0.5em; padding: 7px; margin-bottom: 4px;}
    #email {font-size: 0.5em; padding: 7px;}
    #text {font-size: 0.7em;}          


    .link_change ul {margin-top: 20px;} 
    #img1 {float: left; margin: 1px; }
    #copry a {text-decoration: none; }

    }


I have as a link to say, in my body Element,

body > main {
    grid-area: main;     
     position: relative;
     min-height: 100vh;

    }

and in me footer Element,

footer#copry{ 
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;  
    }

but nothing to change, like the screenshot to see,

enter the description of the image here

Can someone help me with this problem, thanks!