Procházet zdrojové kódy

form input required * ok

ouidade před 3 roky
rodič
revize
214b229992

+ 206 - 28
web/themes/custom/eql/css-compiled/styles.css

@@ -2236,67 +2236,167 @@ a {
     flex-direction: row;
     flex-wrap: wrap;
     flex-basis: auto;
-    justify-content: space-between;
+    justify-content: flex-start;
     margin-top: 10vh; }
     .path-webform .region-content #webform-submission-deposer-une-contribution-add-form #edit-processed-text {
       width: 100%; }
     .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-titre-du-document {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
       margin-top: 2rem;
       width: 100%; }
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-titre-du-document:after {
+        content: "*";
+        color: red;
+        font-size: 2rem;
+        padding-left: 0.5rem; }
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-titre-du-document label {
+        width: 100%; }
       .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-titre-du-document input {
-        width: 100%;
+        width: 90%;
         height: 5rem; }
-        .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-titre-du-document input:after {
-          content: "*";
-          color: red; }
     .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-auteur-s- {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
       margin-top: 2rem;
       width: 100%; }
-      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-auteur-s- input {
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-auteur-s-:after {
+        content: "*";
+        color: red;
+        font-size: 2rem;
+        padding-left: 0.5rem; }
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-auteur-s- label {
         width: 100%; }
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-auteur-s- input {
+        width: 90%; }
     .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-date-de-parution {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
       margin-top: 2rem;
       width: 45%; }
-      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-date-de-parution input {
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-date-de-parution:after {
+        content: "*";
+        color: red;
+        font-size: 2rem;
+        padding-left: 0.5rem; }
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-date-de-parution label {
         width: 100%; }
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-date-de-parution input {
+        width: 90%; }
     .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-nombre-de-pages {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
       margin-top: 2rem;
-      width: 45%; }
+      width: 45%;
+      margin-right: 3rem; }
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-nombre-de-pages label {
+        width: 100%; }
       .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-nombre-de-pages input {
         width: 100%; }
     .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-nom-de-la-revue-et-de-l-editeur {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
       width: 100%;
       margin-top: 2rem; }
-      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-nom-de-la-revue-et-de-l-editeur input {
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-nom-de-la-revue-et-de-l-editeur:after {
+        content: "*";
+        color: red;
+        font-size: 2rem;
+        padding-left: 0.5rem; }
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-nom-de-la-revue-et-de-l-editeur label {
         width: 100%; }
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-nom-de-la-revue-et-de-l-editeur input {
+        width: 90%; }
     .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-type-de-document-revue-article-etc- {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
       margin-top: 2rem;
       width: 100%; }
-      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-type-de-document-revue-article-etc- input {
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-type-de-document-revue-article-etc-:after {
+        content: "*";
+        color: red;
+        font-size: 2rem;
+        padding-left: 0.5rem; }
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-type-de-document-revue-article-etc- label {
         width: 100%; }
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-type-de-document-revue-article-etc- input {
+        width: 90%; }
     .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-resume-de-la-ressource {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
       width: 100%;
       margin-top: 2rem; }
-      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-resume-de-la-ressource textarea {
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-resume-de-la-ressource:after {
+        content: "*";
+        color: red;
+        font-size: 2rem;
+        padding-left: 1rem; }
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-resume-de-la-ressource label {
         width: 100%; }
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-resume-de-la-ressource div {
+        width: 90%; }
+        .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-resume-de-la-ressource div textarea {
+          width: 100%; }
     .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-_-ou-4-mots-ou-expression-cles-pour-identifier-le-sujet {
-      margin-top: 2rem; }
-      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-_-ou-4-mots-ou-expression-cles-pour-identifier-le-sujet input {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      margin-top: 2rem;
+      width: 100%; }
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-_-ou-4-mots-ou-expression-cles-pour-identifier-le-sujet label {
         width: 100%; }
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-_-ou-4-mots-ou-expression-cles-pour-identifier-le-sujet input {
+        width: 90%;
+        height: 3rem; }
     .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-url-vers-une-video-ou-un-site-internet {
-      margin-top: 2rem; }
-      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-url-vers-une-video-ou-un-site-internet input {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      margin-top: 2rem;
+      width: 100%; }
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-url-vers-une-video-ou-un-site-internet label {
         width: 100%; }
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-url-vers-une-video-ou-un-site-internet input {
+        width: 90%;
+        height: 3rem; }
     .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-courriel {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
       margin-top: 2rem;
-      width: 45%; }
-      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-courriel input {
+      width: 47%; }
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-courriel:after {
+        content: "*";
+        color: red;
+        font-size: 2rem;
+        padding-left: 0.5rem; }
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-courriel label {
         width: 100%; }
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-courriel input {
+        width: 90%; }
     .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-telephone {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
       margin-top: 2rem;
-      width: 45%; }
-      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-telephone input {
+      width: 47%;
+      margin-right: 3rem; }
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-telephone:after {
+        content: "*";
+        color: red;
+        font-size: 2rem;
+        padding-left: 0.5rem; }
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-telephone label {
         width: 100%; }
+      .path-webform .region-content #webform-submission-deposer-une-contribution-add-form .form-item-telephone input {
+        width: 90%; }
     .path-webform .region-content #webform-submission-deposer-une-contribution-add-form #edit-actions {
       width: 100%; }
       .path-webform .region-content #webform-submission-deposer-une-contribution-add-form #edit-actions input {
@@ -2317,48 +2417,126 @@ a {
     flex-direction: row;
     flex-wrap: wrap;
     flex-basis: auto;
-    justify-content: space-between;
+    justify-content: flex-start;
     margin-top: 10vh; }
     .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-processed-text {
       width: 100%; }
     .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-intitule-de-l-offre-de-service {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
       margin-top: 2rem;
       width: 100%; }
+      .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-intitule-de-l-offre-de-service:after {
+        content: "*";
+        color: red;
+        font-size: 2rem;
+        padding-left: 0.5rem; }
+      .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-intitule-de-l-offre-de-service label {
+        width: 100%; }
       .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-intitule-de-l-offre-de-service input {
-        width: 100%;
+        width: 90%;
         height: 5rem; }
     .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-structure {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
       margin-top: 2rem;
       width: 100%; }
-      .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-structure input {
+      .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-structure:after {
+        content: "*";
+        color: red;
+        font-size: 2rem;
+        padding-left: 0.5rem; }
+      .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-structure label {
         width: 100%; }
+      .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-structure input {
+        width: 90%; }
     .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-localisation {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
       margin-top: 2rem;
       width: 100%; }
+      .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-localisation:after {
+        content: "*";
+        color: red;
+        font-size: 2rem;
+        padding-left: 0.5rem; }
+      .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-localisation label {
+        width: 100%; }
       .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-localisation input {
+        width: 90%; }
+    .path-webform .region-content #webform-submission-offre-de-service-add-form div {
+      width: 100%; }
+      .path-webform .region-content #webform-submission-offre-de-service-add-form div .form-item-description {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        margin-top: 2rem;
         width: 100%; }
+        .path-webform .region-content #webform-submission-offre-de-service-add-form div .form-item-description label {
+          width: 100%; }
+        .path-webform .region-content #webform-submission-offre-de-service-add-form div .form-item-description textarea {
+          width: 90%; }
     .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-description {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
       margin-top: 2rem;
       width: 100%; }
-      .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-description textarea {
+      .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-description label {
         width: 100%; }
+      .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-description textarea {
+        width: 90%; }
     .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-lien--wrapper {
       width: 100%; }
       .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-lien--wrapper .form-item-lien-url {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
         margin-top: 2rem;
         width: 100%; }
-        .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-lien--wrapper .form-item-lien-url input {
+        .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-lien--wrapper .form-item-lien-url:after {
+          content: "*";
+          color: red;
+          font-size: 2rem;
+          padding-left: 0.5rem; }
+        .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-lien--wrapper .form-item-lien-url label {
           width: 100%; }
+        .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-lien--wrapper .form-item-lien-url input {
+          width: 90%; }
     .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-courriel {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
       margin-top: 2rem;
-      width: 45%; }
-      .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-courriel input {
+      width: 47%; }
+      .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-courriel:after {
+        content: "*";
+        color: red;
+        font-size: 2rem;
+        padding-left: 0.5rem; }
+      .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-courriel label {
         width: 100%; }
+      .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-courriel input {
+        width: 90%; }
     .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-telephone {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
       margin-top: 2rem;
-      width: 45%; }
-      .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-telephone input {
+      width: 47%;
+      margin-right: 3rem; }
+      .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-telephone:after {
+        content: "*";
+        color: red;
+        font-size: 2rem;
+        padding-left: 0.5rem; }
+      .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-telephone label {
         width: 100%; }
+      .path-webform .region-content #webform-submission-offre-de-service-add-form .form-item-telephone input {
+        width: 90%; }
     .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-actions {
       width: 100%; }
       .path-webform .region-content #webform-submission-offre-de-service-add-form #edit-actions input {

+ 202 - 23
web/themes/custom/eql/scss/pages/_webform.scss

@@ -21,7 +21,7 @@
             flex-direction: row;
             flex-wrap: wrap;
             flex-basis: auto;
-            justify-content: space-between;
+            justify-content: flex-start;
             margin-top: 10vh;
             // input:focus ~ label,
             // input:not(:placeholder-shown) ~ label {
@@ -44,15 +44,21 @@
             }
 
             .form-item-titre-du-document{
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
                 margin-top: 2rem;
                 width: 100%;
                 &:after{
                     content: "*";
                     color: red;
+                    font-size: 2rem;
+                    padding-left: 0.5rem;
                 }
+                label{width: 100%;}
                 input{
                     // overflow: visible;
-                    width: 100%;
+                    width: 90%;
                     height: 5rem;
                   
                     // ::placeholder{
@@ -71,67 +77,161 @@
             }    
                 
             .form-item-auteur-s-{
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
                 margin-top: 2rem;
                 width: 100%;
+                &:after{
+                    content: "*";
+                    color: red;
+                    font-size: 2rem;
+                    padding-left: 0.5rem;
+                }
+                label{width: 100%;}
                 input{
-                    width: 100%;
+                    width: 90%;
                 }
             
             }
             .form-item-date-de-parution{
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
                 margin-top: 2rem;
                 width: 45%;
+                &:after{
+                    content: "*";
+                    color: red;
+                    font-size: 2rem;
+                    padding-left: 0.5rem;
+                }
+                label{width: 100%;}
                 input{
-                    width: 100%;
+                    width: 90%;
                 }
             }
             .form-item-nombre-de-pages{
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
                 margin-top: 2rem;
                 width: 45%;
+                margin-right: 3rem;
+                label{width: 100%;}
                 input{
+                    // margin-top: 1rem;
                     width: 100%;
                 }
             }
             .form-item-nom-de-la-revue-et-de-l-editeur{
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
                 width: 100%;
                 margin-top: 2rem;
+                &:after{
+                    content: "*";
+                    color: red;
+                    font-size: 2rem;
+                    padding-left: 0.5rem;
+                }
+                label{width: 100%;}
                 input{
-                    width: 100%;
+                    width: 90%;
                 }
             }
             .form-item-type-de-document-revue-article-etc-{
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
                 margin-top: 2rem;
                 width: 100%;
+                &:after{
+                    content: "*";
+                    color: red;
+                    font-size: 2rem;
+                    padding-left: 0.5rem;
+                }
+                label{width: 100%;}
                 input{
-                    width: 100%;
+                    width: 90%;
                 }
             }
             .form-item-resume-de-la-ressource{
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
                 width: 100%;
                 margin-top: 2rem;
-                textarea{width: 100%;}
+                &:after{
+                    content: "*";
+                    color: red;
+                    font-size: 2rem;
+                    padding-left: 1rem;
+                }
+                label{width:100%}
+                div{
+                    width: 90%;
+                    textarea{width: 100%;}
+                }
+                
             }
             .form-item-_-ou-4-mots-ou-expression-cles-pour-identifier-le-sujet{
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
                 margin-top: 2rem;
+                width: 100%;
+                
+                label{width: 100%;}
                 input{
-                    width: 100%;
+                    width: 90%;
+                    height: 3rem;
                 }
             }
             .form-item-url-vers-une-video-ou-un-site-internet{
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
                 margin-top: 2rem;
+                width: 100%;
+                label{width: 100%;}
                 input{
-                    width: 100%;
+                    width: 90%;
+                    height: 3rem;
                 }
             }
             .form-item-courriel{
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
                 margin-top: 2rem;
-                width: 45%;
-                input{width: 100%;}
+                width: 47%;
+                &:after{
+                    content: "*";
+                    color: red;
+                    font-size: 2rem;
+                    padding-left: 0.5rem;
+                }
+                label{width: 100%;}
+                input{width: 90%;}
             }
             .form-item-telephone{
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
                 margin-top: 2rem;
-                width: 45%;
-                input{width: 100%;}
+                width: 47%;
+                margin-right: 3rem;
+                &:after{
+                    content: "*";
+                    color: red;
+                    font-size: 2rem;
+                    padding-left: 0.5rem;
+                }
+                label{width: 100%;}
+                input{width: 90%;}
             }
             #edit-actions{
                 // display: inline-flex;
@@ -159,7 +259,7 @@
             flex-direction: row;
             flex-wrap: wrap;
             flex-basis: auto;
-            justify-content: space-between;
+            justify-content: flex-start;
             margin-top: 10vh;
             // input:focus ~ label,
             // input:not(:placeholder-shown) ~ label {
@@ -171,56 +271,135 @@
             }
 
             .form-item-intitule-de-l-offre-de-service{
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
                 margin-top: 2rem;
                 width: 100%;
+                &:after{
+                    content: "*";
+                    color: red;
+                    font-size: 2rem;
+                    padding-left: 0.5rem;
+                }
+                label{width: 100%;}
                 input{
-                    width: 100%;
+                    width: 90%;
                     height: 5rem;
 
                 }
             }    
                 
             .form-item-structure{
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
                 margin-top: 2rem;
                 width: 100%;
+                &:after{
+                    content: "*";
+                    color: red;
+                    font-size: 2rem;
+                    padding-left: 0.5rem;
+                }
+                label{width: 100%;}
                 input{
-                    width: 100%;
+                    width: 90%;
                 }
             
             }
             .form-item-localisation{
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
                 margin-top: 2rem;
                 width: 100%;
+                &:after{
+                    content: "*";
+                    color: red;
+                    font-size: 2rem;
+                    padding-left: 0.5rem;
+                }
+                label{width: 100%; }
                 input{
-                    width: 100%;
+                    width: 90%;
                 }
             }
+            div{
+                width: 100%;
+                .form-item-description{
+                    display: flex;
+                    flex-direction: row;
+                    flex-wrap: wrap;
+                    margin-top: 2rem;
+                    width: 100%;
+                    label{width: 100%;}
+                    textarea{
+                        width: 90%;
+                    }
+                } 
+            }
             .form-item-description{
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
                 margin-top: 2rem;
                 width: 100%;
+                label{width: 100%;}
                 textarea{
-                    width: 100%;
+                    width: 90%;
                 }
             }
             #edit-lien--wrapper{
                 width: 100%;
                 .form-item-lien-url{
+                    display: flex;
+                    flex-direction: row;
+                    flex-wrap: wrap;
                     margin-top: 2rem;
                     width: 100%;
+                    &:after{
+                        content: "*";
+                        color: red;
+                        font-size: 2rem;
+                        padding-left: 0.5rem;
+                    }
+                    label{width: 100%;}
                     input{
-                        width: 100%;
+                        width: 90%;
                     }
                 }
             }
             .form-item-courriel{
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
                 margin-top: 2rem;
-                width: 45%;
-                input{width: 100%;}
+                width: 47%;
+                &:after{
+                    content: "*";
+                    color: red;
+                    font-size: 2rem;
+                    padding-left: 0.5rem;
+                }
+                label{width: 100%;}
+                input{width: 90%;}
             }
             .form-item-telephone{
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
                 margin-top: 2rem;
-                width: 45%;
-                input{width: 100%;}
+                width: 47%;
+                margin-right: 3rem;
+                &:after{
+                    content: "*";
+                    color: red;
+                    font-size: 2rem;
+                    padding-left: 0.5rem;
+                }
+                label{width: 100%;}
+                input{width: 90%;}
             }
             #edit-actions{
                 // display: inline-flex;