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)

[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 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; }

[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 ?>