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;
   height: auto;
+  max-height: 200px;
   width: auto;
+  max-width: 100%;
   margin: 0 auto;
-}
-
-@media (max-width: 766px)
-{
-  .card img { max-height: 200px; }
 }
 
 @media(min-width: 768px)
 {
+  .card h3 { height: 70px; }

[ire, 2018/01/10 10:08:39]

Why is this here? (This height doesn't actually contain the longer headings if
that is what you were going for?)

[juliandoucette, 2018/01/11 12:43:56]

I knew this would come back to bite me :D

This is here because it was there before. IIRC this is leftover from a time past
when the height of the header was actually fixed and overflow:hidden. I want(ed)
to address this separately. But I kindof dipped my feet in the pond by moving it
from .card h3 to @media here (I moved it because it is not helpful on mobile -
which I was optimizing for in this issue - IDK if it's *really* helpful on
desktop)

[ire, 2018/01/12 12:44:46]

Haha ack. I don't think it is particularly helpful on desktop, but we don't have
to address this now/ever

   .card img { max-height: 100px; }
 }
 </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 ?>