From 92ecd2a959772bbad395c4c2bc2dfdc7c66505f7 Mon Sep 17 00:00:00 2001 From: Christophe Date: Sat, 10 Apr 2021 16:26:36 +0200 Subject: [PATCH] Issue 5 fixed #5 --- index.html | 2 +- modal.css | 66 +++++++++++++++++++++++++++++++++++++++--------------- 2 files changed, 49 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index b19eb01bd6..72520334e7 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@
Accueil diff --git a/modal.css b/modal.css index bf7f92a7d6..09a365b7a2 100644 --- a/modal.css +++ b/modal.css @@ -11,7 +11,6 @@ /* Landing Page */ body { - margin: 0; display: flex; flex-direction: column; /*background-image: url("background.png");*/ @@ -33,13 +32,14 @@ img { .topnav { overflow: hidden; margin: 3.5%; + display: flex; + flex-flow: row wrap; + justify-content: space-between; + align-items: center; } .header-logo { float: left; } -.main-navbar { - float: right; -} .topnav a { float: left; display: block; @@ -68,7 +68,7 @@ img { display: none; } -@media screen and (max-width: 768px) { +@media screen and (max-width: 540px) { .topnav a { display: none; } @@ -79,8 +79,17 @@ img { } @media screen and (max-width: 768px) { + .topnav a { + display: none; + } + .topnav a.icon { + float: right; + display: block; + } .topnav.responsive { position: relative; + flex-flow: column wrap; + align-items: initial; } .topnav.responsive .icon { position: absolute; @@ -94,17 +103,6 @@ img { } } -@media screen and (max-width: 540px) { - .topnav a { - display: none; - } - .topnav a.icon { - float: right; - display: block; - margin-top: -15px; - } -} - main { font-size: 130%; font-weight: bolder; @@ -241,7 +239,7 @@ input[data-error]::after { flex-flow: wrap; align-items: center; padding: 20%; - height: 96vh; + height: 90vh; } /* Error Message */ @@ -369,6 +367,9 @@ input[data-error]::after { border: 0; align-self: flex-end; } +.btn-close:hover { + background: #3876ac; +} /* custom select styles */ .custom-select { position: relative; @@ -440,6 +441,28 @@ input[data-error]::after { font-weight: normal; font-size: 16px; } +@media screen and (max-width: 540px) { + .content { + margin: 20% auto; + } + label { + margin-bottom: 7px; + margin-top: 5px; + font-size: 14px; + } + .text-control { + height: 30px; + } + .modal-body { + margin: auto; + } + .text-label { + font-size: 14px; + } + .btn-submit { + padding: 6px 50px; + } +} .hero-section { min-height: 93vh; border-radius: 10px; @@ -514,6 +537,12 @@ footer { padding-right: 2vw; margin: 0 20px; } +@media screen and (max-width: 1000px) { + .hero-headline { + font-size: 4.5rem; + } +} + @media screen and (max-width: 800px) { .hero-section { display: block; @@ -523,6 +552,7 @@ footer { background: #fff; color: #000; padding: 20px; + min-width: 100%; } .hero-content::after { content: unset; @@ -531,7 +561,7 @@ footer { display: none; } .hero-headline { - font-size: 4.5rem; + font-size: 3.5rem; white-space: normal; } .hero-text {