diff --git a/assets/css/layout.scss b/assets/css/layout.scss index 13b6a44..039a3c0 100644 --- a/assets/css/layout.scss +++ b/assets/css/layout.scss @@ -33,20 +33,62 @@ main { footer { display: flex; - justify-content: center; + flex-direction: column; + align-items: center; + margin-bottom: 30px; .container { display: flex; justify-content: space-between; width: 50%; - align-items: center; + align-items: start; .middle img { max-width: 55px; + margin-top: 10px; } .right { text-align: right; } } + + .mobile-middle { + visibility: hidden; + + img { + max-width: 55px; + margin-top: 10px; + } + } + + img:hover { + border-radius: 50%; + border: solid 2px; + } +} + +@media screen and (max-width: 600px) { + footer { + .container { + width: 95% !important; + flex-direction: column; + align-items: center; + margin-top: 20px; + margin-bottom: 20px; + + div { + text-align: center !important; + } + + .middle { + visibility: hidden; + max-height: 15px; + } + } + + .mobile-middle { + visibility: visible; + } + } } diff --git a/assets/css/pages/form.scss b/assets/css/pages/form.scss index d4301e4..fb9390c 100644 --- a/assets/css/pages/form.scss +++ b/assets/css/pages/form.scss @@ -6,3 +6,7 @@ form { .checkbox-container { display: flex; } + +input { + margin-bottom: 10px; +} diff --git a/lib/runosaari_web/templates/layout/app.html.eex b/lib/runosaari_web/templates/layout/app.html.eex index 4ed4ddf..6638c3c 100644 --- a/lib/runosaari_web/templates/layout/app.html.eex +++ b/lib/runosaari_web/templates/layout/app.html.eex @@ -29,19 +29,31 @@ <%= @inner_content %>