In this article, we'll cover why this happens, as well as provide some recommendations for ensuring your chosen opt-in images look great across devices. We'll also provide CSS snippets to modify how the image itself displayed, which can help in certain use cases!

First, let's cover the basics:

That's right! Every one of our Form & Landing Page templates is designed & coded to look great across all screen sizes.

You don't have to worry about specifically picking a template that will be mobile-friendly, because they all are!

That being said, in order for our opt-ins to be be effectively responsive, a couple of things are true:

This is the very nature of responsive design! The layout will respond to the size of the screen on which it's being viewed.

For example, on most mobile devices there won't be enough room to show an image and the entire Form side-by-side. As a result, our Form elements are coded to automatically stack on top of one another once the screen is narrower than a certain point.

You can tell if an image is coded as a background image because it'll say so in the sidebar where you upload the image. Here's an example from the sidebar of our Charlotte Form template—this is the template's focal image, but it's still a background image:

What does this mean?

Our background images are typically styled to cover the entirety of the container they're in, edge-to-edge. This allows our designs to be flexible enough to be fluidly responsive across all screen sizes, but it also has some side effects (so to speak).

Namely, since the layout of your opt-in will change on different screen sizes, the size of the container a background image is contained in will also change. Since the image is coded to fill its container edge-to-edge, the container changing size can result in parts of your image getting cut off.

What can you do about it if an image is getting cropped in a way that you don't want?

We'll get to that shortly—first, let's see a quick demo of responsive design in action.

Because, well, a picture is worth a thousand words. Ha!

To better conceptualize how some image placeholders adjust responsively, take a look at the demos below using our Charlotte template, for which the focal image is coded as a background image.

Check out how it responsively adjusts to the screen size on which it's being viewed:

See how the Form automatically stacks once decreased past a certain screen width? The image stays the same, but the crop is different. This affects the part of the image that is visible!

As a comparison, check out the same Charlotte template below — but this time showing how it performs with an ebook cover, instead:

Looks pretty good at full-width, right? But you can see as soon as it resizes to the mobile-friendly layout, the image gets cropped, which cuts off pertinent info. Not ideal.

So, what can we do about it?

In most cases, there are 3 potential remedies for image cropping issues:

Let's go into some more detail about each of these!

You can override the way the background image is displayed by adding some custom CSS to your Form. We'll provide two different CSS snippets, for two separate use cases.

NOTE: The custom CSS box for your Form is located in the Form builder sidebar under 'General Styles'.

☝️ Often works well for ebook covers.

If you want to use an image that shouldn't be cropped at all (such as an ebook cover), try adding the following CSS to your Form:

This code will cause the image to be contained within its container, rather than cover the container edge-to-edge. Depending on the image you're using, this approach might work better for your design.

HEAD'S UP: This will cause whitespace to show on either side of your image on certain screen sizes, as demonstrated below. This is because you're overriding the default styling so that your image does not show edge-to-edge like it normally would.

Before & after example:

☝️ Often works well for headshots that are getting cut off on mobile layouts.

The following CSS will shift the background image downward, but only on screen sizes <600px wide (typically will apply to mobile devices):

A couple of notes on this CSS:

Before & after example:

If you don't want to use CSS, but are set on using a particular image, there are still some options!

Namely, try leaving some breathing room around the focal point. Some images with clear focal points can still work in a background image slot so long as they have sufficient 'breathing room'. This gives the design a little extra space to adjust around it, before anything important gets cut off.

The closer the important elements are to the edges of the image, the sooner they'll risk being cropped out on different screen sizes.

It may take a bit of trial & error to determine what layout/crop works best for your particular image!

NOTE: If you need to re-crop your image you can use our built-in image editor to do it from right within Kit.

Maybe the other two options won't work for you, or maybe you haven't even selected your image yet and you just want to be sure to pick one that will work well.

Either way, here's what to consider when selecting an image for a background image slot:

Try to pick an image that doesn't have a clear focal point. Examples include landscapes, textures, and patterns. (On the flip-side, images you might want to avoid include headshots, portraits, ebook covers, and anything containing text.)

Images that are more background-friendly will be more forgiving of different crops. They won't necessarily have one clear, obvious focal point, such as someone's face, nor will they contain informational text that risks getting cropped out.

Consider the following comparison:

As you can see, the ocean image used for the example on the left is much more background-friendly. It'll pretty much work with any crop! On the other hand, the ebook cover on the right contains text which is getting cut off on mobile, so it doesn't work as well in this particular placeholder use-case.

In the end, nothing is better than actually viewing your Form or Landing Page on different screen sizes to see how it appears in the wild. This will allow you to catch any potential issues, with their imagery or otherwise, before promoting it to your followers.

This process can be easily done from your desktop! Simply increase & decrease the width of your browser window, and see how your Form or Landing Page responds.

TIP: While checking different screen sizes by resizing your browser window is a great check at minimum, nothing beats viewing the Form on actual different devices (such as your phone, tablet, etc.) as well. Ideally, test with a combination of both.