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

pages/about/best-practices.md

 title=Best Practices
 description=A few best practices of how Acceptable Ads are formatted and implemented
 parent=about/index
 custom=1
 
 <div class="container" markdown="1">
   <div class="col-6" markdown="1">
 
 # {{best-practices-heading[Best practices heading] Best Practices}}
 
 ---
 
 {{best-practices-summary[Best practices summary] The following guidelines have been taken from successful cases of websites implementing Acceptable Ads. Make your website look awesome and start monetizing good forms of advertising, too. It’s this easy:}}
 
   </div>
 </div>
 
-<div class="bg-accent m-y-xl" markdown="1">
+<div class="bg-accent section" markdown="1">

[juliandoucette, 2017/05/16 19:07:34]

Is there a reason why you put section here instead of below? It seems to be
placed inconsistently across pages.

[ire, 2017/05/16 21:32:27]

Yes. So this seemed to fit the description/styling of what a ".section" is.
Plus, by making it a .section I was able to change the margin responsively, as
opposed to the fixed xl margin previously applied.

[juliandoucette, 2017/05/17 13:09:11]

Acknowledged.

   <div class="container center" markdown="1">
 
 > {{best-practices-quote-1[Best practices summary quote line 1] Choose the best formats in the best spots.}}<br> {{best-practices-quote-2[Best practices summary quote line 2] Be clear and relevant. It’s really that simple.}}
 
   </div>
 </div>
 
 <div class="container col-6 center" markdown="1">
 
   <div class="section" markdown="1">
@@ skipping 17 matching lines @@
   <div class="section" markdown="1">
 
 ![{{be-straightforward-image-alt(Be straightforward image alt text) Good location example image}}](/img/png/best-practice-label.png)
 
 ### {{be-straightforward-header[Be straightforward header] Be straightforward, and don’t try to disguise ad content as editorial}} {: #be-straightforward }
 
 {{be-straightforward-p[Be straightforward paragraph] Make your ads recognizable by labeling them as such. With new formats such a native, the line between editorial content and ads has never been so thin!}}
 
   </div>
 </div>