Adjust image styling so the aspect ratio isn't messed up

This commit is contained in:
Hippo 2021-12-28 22:55:36 +05:30
parent ed182d4f20
commit faa1b2d132

View file

@ -54,7 +54,7 @@
<div class="max-w-4xl ml-auto p-10">
<h1 class="text-4xl font-heading font-extrabold lowercase text-center">Who we are</h1>
<div class="flex flex-wrap text-xl font-sans">
<img alt="Snipette puppies" src="img/three-pups.png" class="p-5 sm:w-full md:w-1/2 lg:w-1/3"/>
<img alt="Snipette puppies" src="img/three-pups.png" class="p-5 sm:w-full md:w-1/2 lg:w-1/3 h-full"/>
<p class="md:p-5 sm:w-full md:w-1/2 lg:w-2/3">
We are a web and print magazine seeking to explain the world in an easy to understand way. Our key words are: understandability, perspective, and fun.
</p>
@ -66,7 +66,7 @@
<div class="max-w-4xl ml-auto p-10">
<h1 class="text-4xl font-heading font-extrabold lowercase text-center">What we do</h1>
<div class="flex flex-wrap flex-row md:flex-row-reverse text-xl font-sans">
<img alt="Puppy with a stack of magazines" src="img/stackpup.png" class="p-5 sm:w-full md:w-1/2 lg:w-1/3"/>
<img alt="Puppy with a stack of magazines" src="img/stackpup.png" class="p-5 sm:w-full md:w-1/2 lg:w-1/3 h-full"/>
<p class="md:p-5 sm:w-full md:w-1/2 lg:w-2/3">
In order to make our content more accessible, we have been bringing out a print version, Snipette Analog, which is a better medium for long-form articles. <a href="#">Sample the latest issue here</a>.
</p>
@ -78,7 +78,7 @@
<div class="max-w-4xl ml-auto p-10">
<h1 class="text-4xl font-heading font-extrabold lowercase text-center">Our problem</h1>
<div class="flex flex-wrap text-xl font-sans">
<img alt="People wanting money and money wanting people" src="img/catch-twenty-two.png" class="p-5 sm:w-full md:w-1/2 lg:w-1/3"/>
<img alt="People wanting money and money wanting people" src="img/catch-twenty-two.png" class="p-5 sm:w-full md:w-1/2 lg:w-1/3 h-full"/>
<p class="md:p-5 sm:w-full md:w-1/2 lg:w-2/3">
Digital printing is expensive. Offset printing is more cost-effective, but it only works at scale—1000 copies or more. So we can't bring down costs till we got more subscribers, but we won't get more subscribers till we bring down costs. <a href="https://en.wiktionary.org/wiki/Catch-22" target="_blank">Catch-22</a>.
</p>