How to Crop Teachable Grid Images To Equal Heights

Struggling to get the images in your 'Text With Image Grid' blocks to line up?

Since Teachable doesn't resize these images for you when you upload them, you usually need to crop them before or during the upload process to prevent the block looking messy.




shadow full

But there's a way to do this automatically with some custom CSS, so that the images line up nicely no matter what dimensions you upload.

Step 1: Copy this custom CSS code

Highlight and copy this code to your clipboard. Then follow the instructions underneath on where to paste it.





See the Pen Public: Smaller Teachable banner block by Siobhan James (@taskerly) on CodePen.

Step 2: Paste the code into your school

The code needs to be pasted into the CSS area of your school.

  1. Open your Teachable admin area.
  2. Click Site in the icon menu.
  3. Click Code Snippets in the text menu.
  4. Open the Cascading Style Sheets section (arrow on the right).
  5. Paste your code into the text area.
  6. Click Save.



shadow full

Step 3: Check your grid images!

Your grid images should now all be cropped to the same dimensions, regardless of their size when you uploaded them.

If you want different dimensions, just change the aspect ratio in the custom code.

For example, you could change the aspect ratio to 1/1 (instead of 19/12). That would make your images square.

Or an aspect ratio of 3/4 would make it a portrait rectangle.

shadow full