app-mobile.css

/* Style for RemoteDebugApp web page  - for mobile */

/* @media (max-width:800px) and (orientation: portrait) { */
@media (max-width:800px) and (max-aspect-ratio: 13/9) { /* using aspect-ratio to avoid landscape - keyboard android - saw it in https://stackoverflow.com/questions/8883163/css-media-query-soft-keyboard-breaks-css-orientation-rules-alternative-solut */ 

body {
    font-family: monospace;
    color: white;
    margin: 0px;
    background-color: #999;
}
    
.page-wrap {
    width: 100vw;
    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100); /* saw it in https://css-tricks.com/the-trick-to-viewport-units-on-mobile */
    margin: 0 auto;
    overflow: scroll;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0fr 1fr 0fr;
    grid-template-areas: 'col' 'col' 'col';
}

.header {
    width: 100%;
    border: 1px #000;
    margin: 0%;
    padding: 0%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0fr 0fr 0fr;
    grid-template-areas: 'col' 'col' 'col';
    grid-gap: 5px;
    grid-row-gap: 1px; 
    /* Generate by https://www.css-gradient.com/ */
    background: #4B4B4B;
    background: -webkit-linear-gradient(top, #4B4B4B, #181818);
    background: -moz-linear-gradient(top, #4B4B4B, #181818);
    background: linear-gradient(to bottom, #4B4B4B, #181818);
}

.footer {
    width: 100%;
    border-color: #000;
    border-width: 1px;
    display: block;
    padding-top: 10px;
    /* Generate by https://www.css-gradient.com/  */
    background: #4B4B4B;
    background: -webkit-linear-gradient(top, #181818, #4B4B4B);
    background: -moz-linear-gradient(top, #181818, #4B4B4B);
    background: linear-gradient(to bottom, #181818, #4B4B4B);
}

#img_logo {
    width: 220px;
    margin: 0%;
    padding: 0%;
    cursor:pointer;
}

#header_info {
    float: center;
    margin-left: auto;
    font-size: .75em;
    display: grid;
    visibility: none; 
    align-items: baseline;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 'col col' 'col col';
}

#img_refreshmem {
    width: 20px;
    height: 20px;
    cursor:pointer;
}

#tbl_console * {
    font-size: 14px;
}

#img_separator1 {
    width: 0px;
}


#txt_address {
    color: #ccc;
    max-width: 200px;
}

#txt_send {
    color: #ccc;
    max-width: 200px;
}


} /* media */

/* End */