Issue 6211 - Fixed size of blog post thumbnails on mobile

pages/blog/index.md

 title=Blog | Acceptable Ads
 description=Keeping you up-to-date with everything related to acceptable ads.
 breadcrumb=Blog
 custom=1
 
 <style>
 .card h3
 {
   font-size: 20px;
   height: 70px;
 }
 
+.card img
+{
+  display: block;
+  margin: 0 auto;
+}
+
+@media (max-width: 766px)

[ire, 2018/01/08 10:58:44]

Should be 767px

[juliandoucette, 2018/01/08 12:45:36]

Good catch.

+{
+  .card a,

[ire, 2018/01/08 10:58:43]

Why is there a fixed height on the links as well?

[juliandoucette, 2018/01/08 12:45:36]

No idea :/

+  .card img { height: 200px; }

[ire, 2018/01/08 10:58:43]

This isn't relevant now (because most images are almost square), but we should
account for images that are landscape. Currently, the width of these images
isn't responsive, so if we get an image that is wider than longer, it will
overflow

[ire, 2018/01/08 10:58:43]

I don't think the single-line format should be used if there are two lines of
selector?

[juliandoucette, 2018/01/08 12:45:36]

Good catch.

[juliandoucette, 2018/01/08 12:45:36]

Not sure about this :/

(It won't be relevant in the next patchset.)

[ire, 2018/01/09 08:26:33]

Are you going to address this now?

[juliandoucette, 2018/01/09 14:24:03]

I thought I did :D

Should be addressed now.

+}
+
 @media(min-width: 768px)
 {
-  .card img.block
-  {
-    width: auto !important;
-    height: auto;
-    max-height: 100px;
-    margin: 0 auto;
-  }
+  .card img { max-height: 100px; }

[ire, 2018/01/08 10:58:44]

NIT: Maybe this should just be height instead of max-height?

[juliandoucette, 2018/01/08 12:45:36]

I think max-height is better if height/width are auto in-case the image is wide.

 }
 </style>
 
 <div class="container" markdown="1">
 # {{blog-heading[Blog Heading] The official Acceptable Ads blog}}
 
 ---
 
 <div class="section" markdown="1">
 {{blog-paragraph1[Acceptable Ads Blog Paragraph 1] Stay connected.}}
 </div>
 
 </div>
 
 <? include blog/all-posts ?>