diff --git a/css/instance.css b/css/instance.css index bea946a..4c30196 100644 --- a/css/instance.css +++ b/css/instance.css @@ -1,8 +1,26 @@ -div { - display: flex; - flex-direction: row; - align-items: center; - column-gap: 10px; +@media screen and (min-width: 1000px) { + div { + display: flex; + flex-direction: row; + align-items: center; + column-gap: 10px; + } +} +@media screen and (max-width: 1000px) { + * { + } + #instance-status { + display: none; + } + #instance-type { + display: none; + } + #node-name { + display: none; + } + #node-status-div { + display: none; + } } .btn-group { diff --git a/index.html b/index.html index 425d215..242b592 100644 --- a/index.html +++ b/index.html @@ -31,25 +31,24 @@ } @media screen and (max-width: 1000px) { #instance-container { - display: flex; - flex-direction: column; + display: grid; + grid-template-columns: auto auto 1fr auto; + column-gap: 2.5em; + align-items: center; + } + #instance-container { + margin: 0px; } #instance-container-header * { display: none; } instance-obj { - display: grid; - grid-template-columns: auto auto auto 1fr; - gap: 20px; - padding-top: 20px; - padding-bottom: 20px; + display: contents; + } + instance-obj:after, instance-obj:first-of-type:before { + content: " "; border-bottom: 1px solid var(--content-txt-color); - } - instance-obj:first-of-type { - border-top: 1px solid var(--content-txt-color); - } - .btn-group { - grid-column: 3 / span 2; + grid-column: 1 / span 8; } } diff --git a/scripts/instance.js b/scripts/instance.js index 78bd80d..94b880f 100644 --- a/scripts/instance.js +++ b/scripts/instance.js @@ -13,9 +13,9 @@ export class Instance extends HTMLElement {

-

+

-

+