Issue 5135 - Reduce font size and padding on smaller screens on acceptableads.com

pages/committee/apply.md

 title=Apply to join | The Acceptable Ads Committee
 description=The Acceptable Ads Committee has full control over the Acceptable Ads initiative, including what’s deemed acceptable by defining the Acceptable Ads criteria.
 parent=committee/index
 
 <style type="text/css">
   #success-msg, #error-msg, .success #clear, .success #submit
   {
     display: none;
   }
 
   .success #success-msg, .error-response #error-msg
   {
     display: block;
   }
+
+  .join-committee-paragraph

[juliandoucette, 2017/06/26 10:31:21]

Does this apply to more than one element (use ID instead?) / it seems like there
may/should be a container class for this?

[ire, 2017/06/27 08:36:30]

I went with a container class

+  {
+    margin-bottom: 32px;
+  }
+
+  .application-form-btns

[juliandoucette, 2017/06/26 10:31:21]

See comment in about/style.

[ire, 2017/06/27 08:36:29]

Done.

+  {
+    margin-top: 32px;
+  }
+
+  @media(min-width: 768px)
+  {
+    .join-committee-paragraph
+    {
+      margin-bottom: 64px;
+    }
+
+    .application-form-btns
+    {
+      margin-top: 64px;
+    }
+  }
 </style>
 
 <script type="text/javascript">
 function addListener(obj, type, listener, useCapture)
 {
   if ("addEventListener" in obj)
   {
     obj.addEventListener(type, function(ev)
     {
       if (listener(ev) === false)
@@ skipping 68 matching lines @@
 
 <div class="row" markdown="1">
 <div class="col-6 expand-on-tablet" markdown="1">
 <form id="application-form" class="section" method="POST" markdown="1">
 
 # {{join-committee-heading[Headline text] Apply to join the committee}}
 
 ---
 
 {{join-committee-paragraph[Join committee paragraph] Do you want to help create a new standard of advertising and improve the ad experience for millions of ad-blocking users? If so, fill out the form below!}}
-{: .m-b-lg }
+{: .join-committee-paragraph }
 
   <label for="name">
     {{name[Field label text] Name}}
   </label>
   <input id="name" type="text" name="name" required />
 
   <label for="title">
     {{title[Field label text] Title}}
   </label>
   <input id="title" type="text" name="title" required />
@@ skipping 29 matching lines @@
     <option value="Other">{{other[Item inside Stakeholder group selectbox] Other}}</option>
   </select>
 
   <label for="motivation">
     {{motivation[Field label text] Motivation}}
   </label>
   <textarea id="motivation" placeholder="{{text-area-placeholder[Placeholder text inside textarea] Please provide in 100 words or less a short description of why you would be a good fit}}" rows="14" name="motivation" required></textarea>
 
   <input id="clear" class="btn-outline-primary" type="reset" name="reset" value="{{submit Clear}}" />
   <input id="submit" class="btn-primary" type="submit" name="Submit" value="{{submit Submit}}" />
-  {: .eol .m-t-lg }
+  {: .eol .application-form-btns }
 
   {{submition-success[Text to be shown after successfull submition] Your entry has been successfully submitted. Someone will reach out to you within 10 working days.}}
   { #success-msg .bg-accent .p-a-sm .m-y-sm }
 
   error
   {: #error-msg .bg-error .p-a-sm .m-y-sm }
 
 </form>
 </div>
 </div>