diff --git a/signup_form/css/style.css b/signup_form/css/style.css index a326d5a..7c36e8b 100644 --- a/signup_form/css/style.css +++ b/signup_form/css/style.css @@ -3,4 +3,48 @@ display: flex; flex-direction: column; align-content: center; -} \ No newline at end of file +} + +.form-input { + margin-bottom: 40px; + display: flex; + justify-content: flex-start; + flex-direction: column; + flex-wrap: wrap; +} + +.form-row input[type='text'] { + background-color: #FFFFFF; + border: 1px solid #D6D9DC; + border-radius: 3px; + width: 100%; + padding: 7px; + font-size: 14px; + } + + .form-row label { + margin-bottom: 15px; + } + + + @media only screen and (min-width: 700px) { + .form { + width: 600px; + } + + .form-row { + flex-direction: row; + align-items: flex-start; /* To avoid stretching */ + margin-bottom: 20px; + } + .form-row input[type='text'] { + width: 250px; + height: initial; + } + .form-row label { + text-align: right; + width: 120px; + margin-top: 7px; + padding-right: 20px; + } + } \ No newline at end of file diff --git a/signup_form/index.html b/signup_form/index.html index 5a9cfad..d3ad332 100644 --- a/signup_form/index.html +++ b/signup_form/index.html @@ -17,17 +17,22 @@

Join our mailing list!

-
- +
+
+
+
+
+
+
-
+