Issue 5103 - Added padding to 1/2 column images on acceptableads.com

pages/about/index.html

Index: pages/about/index.html
===================================================================
--- a/pages/about/index.html
+++ b/pages/about/index.html
@@ -1,12 +1,29 @@
 title=What are Acceptable Ads?
 description=Acceptable Ads are nonintrusive ad formats that are accepted by ad blocking users and allow content creators to monetize their content.
 custom=1
 
+<style>
+  #aa-star
+  {
+    display: block;
+    max-width: 60%;

[ire, 2017/09/06 22:56:58]

Why 60%? Should we use padding instead, as done on the homepage? And if so,
maybe there is a way to share the styling of these images across both

[juliandoucette, 2017/09/11 16:15:59]

This was opinionated. I thought 60% looked right across sizes where a standard
space length of padding did not. Do you disagree?

[ire, 2017/09/12 08:14:17]

I think the size of the image looks good at 60%. My comment was mainly about
finding a way to share the style across both pages. I think a similar size to
60% can be achieved by using 64px padding on left and the right. But, if the
homepage will likely use a different size, there may not be point to trying to
share the styles. I will leave it up to you how you want to handle this.

+    margin: 0em auto;
+  }
+
+  @media(max-width: 767px)
+  {
+    #aa-star
+    {
+      display: none;

[ire, 2017/09/06 22:56:58]

Why is this image completely removed on smaller screens?

[juliandoucette, 2017/09/11 16:15:59]

This was opinionated. I thought that it didn't look good at any size on smaller
screens. Do you disagree?

[ire, 2017/09/12 08:14:17]

This is also opinionated, but I think it looks good when it's much smaller
(maybe max-width: 200px), aligned left, and placed *above* the title
("Acceptable Ads..."). The placement in particular is what makes it look awkward
imo.

Perhaps we should get the opinion of Product on this?

+    }
+  }
+</style>
+
 <div class="container">
   <h1>{{what-are-acceptable-ads-heading[What are Acceptable Ads heading] What are Acceptable Ads?}}</h1>
   <hr>
   <div class="row section">
     <div class="col-6 expand-on-tablet">
       <? include about/what-are-acceptable-ads ?>
     </div>
   </div>
@@ -17,15 +34,15 @@
     <? include about/treating-people-with-respect ?>
   </div>
 </div>
 
 <div class="container section">
   <h2>{{acceptable-ads-heading[Acceptable Ads... heading] Acceptable Ads...}}</h2>
   <div class="row">
     <div class="col-6 push-6">
-      <img class="block" alt="{{acceptable-ads-image-alt(Acceptable Ads... image alt text) Acceptable Ads promotional image}}" src="/img/png/what-is-acceptableads.png" />
+      <img id="aa-star" alt="{{ acceptable-ads-image-alt[image alt text] Acceptable Ads promotional image }}" src="/img/png/what-is-acceptableads.png" />
     </div>
     <div class="col-6 pull-6">
       <? include about/acceptable-ads-are ?>
     </div>
   </div>
 </div>