diff --git a/web/mentalattack.html b/web/mentalattack.html index 5c1751a..8f13a26 100644 --- a/web/mentalattack.html +++ b/web/mentalattack.html @@ -15,11 +15,11 @@
- +
- +
diff --git a/web/styles.css b/web/styles.css index 8c1761c..b9e8182 100644 --- a/web/styles.css +++ b/web/styles.css @@ -1,3 +1,14 @@ +label { + display: inline-block; /* makes the labels block elements but keep them inline */ + width: 100px; /* you may need to adjust this based on the width of your widest label */ + text-align: right; + margin-right: 5px; /* provides a 5px space between the label and its input field */ +} + +input { + text-align: left; +} + .form-row { display: flex; justify-content: space-between; @@ -6,15 +17,13 @@ .form-field { display: flex; - flex-direction: row; /* changed this from column */ - align-items: center; /* added this to vertically align elements in the row */ - justify-content: space-between; /* added this to put some space between the label and the input field */ - width: 275px; /* optionally set a width to keep it consistent */ + align-items: center; + justify-content: left; + width: 200px; } .content-container { - max-width: 500px; /* adjust the max width as per requirement */ - /* this line centers your container */ + max-width: 500px; margin: 20px 0px 0 20px; - padding: 0 20px; /* bit of padding so content doesn't touch the edges */ + padding: 0 20px; } \ No newline at end of file