From b386d595085e194c7aded22973b5db4b9e5b731e Mon Sep 17 00:00:00 2001 From: HardiReady Date: Tue, 26 Feb 2019 17:22:07 +0100 Subject: [PATCH] Make army oveview & login mobile responsive --- .../army/army-squad/army-squad.component.scss | 8 +++++--- static/src/app/army/army.component.scss | 18 ++++++++++++------ static/src/app/login/login.component.scss | 5 +++-- 3 files changed, 20 insertions(+), 11 deletions(-) diff --git a/static/src/app/army/army-squad/army-squad.component.scss b/static/src/app/army/army-squad/army-squad.component.scss index 771a292..e5ca46b 100644 --- a/static/src/app/army/army-squad/army-squad.component.scss +++ b/static/src/app/army/army-squad/army-squad.component.scss @@ -5,7 +5,6 @@ @media all and (max-width: 599px) { .squad-layout { - width: 100vw; padding: 1vh 1vw; } @@ -61,7 +60,10 @@ img { position: absolute; margin-top: 8px; - margin-left: 25px; + margin-left: 2%; + @media all and (max-width: 959px) { + margin-left: 0; + } } .title { @@ -72,7 +74,7 @@ img { .name-cell { display: inherit; - margin-left: 200px; + margin-left: 38%; } diff --git a/static/src/app/army/army.component.scss b/static/src/app/army/army.component.scss index fa4ea0d..1718803 100644 --- a/static/src/app/army/army.component.scss +++ b/static/src/app/army/army.component.scss @@ -1,15 +1,12 @@ @import url('../style/background-image.scss'); .army-content-container { - width: 1100px; + width: 90%; + max-width: 1100px; margin: auto; position: relative; } -.army-column-right { - float: right; -} - @media all and (max-width: 599px) { h1 { font-size: 26px; @@ -21,7 +18,7 @@ } div.army-column { - width: 100%; + width: 100%!important; h3 { background: #222; @@ -51,6 +48,15 @@ } } +@media all and (max-width: 959px) { + div.army-column { + width: 49%; + } + .army-content-container { + width: 98%; + } +} + .army-column { width: 45%; } diff --git a/static/src/app/login/login.component.scss b/static/src/app/login/login.component.scss index db7dcd7..479de01 100644 --- a/static/src/app/login/login.component.scss +++ b/static/src/app/login/login.component.scss @@ -1,11 +1,12 @@ .form-signin { - max-width: 330px; + width: 100%; padding: 15px; margin: 0 auto; } .form-signin > .row { - width: 400px; + max-width: 400px; + margin: auto; } .form-signin-heading {