How to Make Teachable's Banner Block Smaller

When you add a banner block to your page on Teachable, it might end up taking up the majority of your page. On some devices, it can be far too big.

That's because the styling code for the block defaults to trying to fill 70-90% of the height of your screen. So the bigger your device, the more overwhelming the banner block can be.

If you want to make it smaller, you need to add a little bit of styling code (called CSS) to your school.

shadow full

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 Stylesheets section (arrow on the right).
  5. Paste your code into the text area.
  6. Click Save.

shadow full

Step 3: Check your banner blocks!

Your banner blocks should now be smaller.

If they're too small, you can now control the size yourself with the padding settings in the page editor.

Just edit the page and click on the banner block. Then click Design in the sidebar and scroll down to the padding settings.

  • Increase the padding to make the banner block taller.
  • Decrease the padding to make the banner smaller.

Any issues with the code, let us know!