Skip to main content

Making an Image Mobile Responsive

Added an image to your website content and noticed it looks too big, overflows the page, or doesn't resize properly on a phone? You can fix this yourself with a small code change. No coding experience needed — just follow the steps below.

Written by Angus Williams

Step 1: Open the Source editor

  1. Go to the content page with the image you'd like to fix

  2. Click <> Source (this switches the editor into code view)

  3. Find the image code — it will look something like this:

<p><img alt="" src="LINK" /></p>

Step 2: Add the responsive class

To make an image resize properly on any screen — desktop, tablet, or phone — it needs this added to it:

class="img-fluid img-responsive"

So your image code should look like this:

<p><img alt="" class="img-fluid img-responsive" src="LINK" /></p>

Placeholder

What it is

LINK

The web address of your image (this will already be there if you've inserted an image — you just need to add the class part)

💡 This class tells the page: "scale this image to always fit its container, and never let it overflow the screen." It's the single most important part of this guide.

Step 3: Avoid fixed width and height

This is the most common reason an image won't resize, even after adding the class above. Watch out for any extra styling on the image that looks like this:

style="width:944px; height:1101px;"

If you see a fixed width or height (in pixels, like 944px) anywhere in the image's code, remove it. A fixed size locks the image at that exact dimension on every device, which stops it from shrinking to fit smaller screens — even with img-fluid img-responsive added.

❌ This won't resize on mobile:

<img alt="" class="img-fluid img-responsive" src="LINK" style="float:left; height:1101px; width:944px" />

✅ This will:

<img alt="" class="img-fluid img-responsive" src="LINK" />

Step 4: Example, fully filled in

Here's a real example, showing the fix applied:

Before (not responsive):

<p><img alt="" src="<https://dh97sxltltum5.cloudfront.net/article_files/798f8f3b-83ee-4cb4-a5ff-50835a87eee6.jpg>" style="float:left; height:1101px; width:944px" /></p>

After (responsive):

<p><img alt="" class="img-fluid img-responsive" src="<https://dh97sxltltum5.cloudfront.net/article_files/798f8f3b-83ee-4cb4-a5ff-50835a87eee6.jpg>" /></p>

Nothing about the image itself changed — just the class was added and the fixed size was removed.

Things to double-check

  • ✅ class="img-fluid img-responsive" is present on the image

  • ✅ There's no width or height set in pixels (e.g. 944px) anywhere in the image's code

  • ✅ The image address (src="...") hasn't been accidentally changed or broken

  • ✅ You haven't removed the surrounding <img or closing />

💡 Tip: After saving, check your preview on a phone (or resize your browser window narrower) to confirm the image shrinks properly and doesn't overflow the page.

Frequently asked questions

My image already has a width and height set — is that always a problem?
For most content images, yes — remove any fixed pixel width/height so the image can shrink on smaller screens. If you specifically need an image to stay a fixed size for design reasons, get in touch with our support team, as there are other ways to control sizing without breaking mobile responsiveness.

Can I use this for logos too?
Logos usually need different handling (they often have their own sizing rules). Check with our support team if you're customising a logo rather than a content image.

I added the class but the image still looks too big — what went wrong?
Double-check there isn't a leftover width or height value hiding in a style="..." attribute on the same image — this is the most common cause.

Have a question not covered here? [Chat with our support team] and we'll be happy to help.

Did this answer your question?