Adjust image width for all images

By default, KnowledgeOwl sets images to have a max-width of 100%. This means that images are displayed at actual size but can never be wider than your article--they're automatically resized to fit within the article. Here's an image with the default 100% max-width:

If you'd like to keep images automatically smaller than 100% width on all screens/devices, we recommend adding some Custom CSS to set that max-width to a different percentage. Using a percentage helps keep the images responsive to fit on any screen size or device.

To make this adjustment:

  1. Go to Settings > Style.
  2. Below the preview pane, click on the Custom CSS tab.
  3. Copy this code. If you want a max-width other than 70%, adjust the percentage accordingly:
    .img-responsive {
         max-width: 70%;
    }
  4. Be sure to Save your changes.
    Your code should look something like this:
    Sample Custom CSS setting max-width of responsive images to 70%

Now the same image is only 70% of the width of the article:

You can increase or decrease the percentage for the desired size, and this will apply to all images in your articles. 

Pro Tip: We recommend using a percentage rather than a static pixel size to ensure your images look great on all devices.