Responsive control for images

Introduction

In this article, you will learn about image adaptivity, when it's best to use it, and how to turn it off for an image. AiTrillion's templates support @media queries that allow you to adapt your template's content to the mobile device's layout, facilitating usability and navigation as well as good display.

How to make images responsive?

You can make your image responsive/adaptive by turning on the control "Responsive image":

Let's consider an example:

It means the image with its original size e.g. 601x397, will be adapted and fully displayed on a mobile screen.

In AiTrillion preview mode, we display templates on mobile with a screen width of 320px.

---

The "Responsive image" control helps you adapt all images with a width greater than the mobile device's screen width.

---

Please be advised that if you keep the "Responsive image" control turned off for the huge image:

You will see a stretched mobile layout, and a horizontal scroll appears then.

Does responsiveness work with background images?

Background images can't be responsive to mobile layouts because they always have their own original size. So you will see the background image's exact part on the mobile view that covers a container, structure, or stripe.

​

Tips and lifehacks:

1. If you have small images or logos (20px, 60px, 100px, etc.), you can turn off the "Responsive image" control so the original image size will be displayed on mobile view.

The result with the "Responsive image" tool turned on:

2. You can add the gradient as a background of your element in case the background image doesn't work properly on mobile.

You can generate the gradient using this service and paste it into your element.

Let's try to apply this linear gradient to a structure as an example:

background: linear-gradient(90deg, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);

The result on mobile view:

• Related Articles

• How to reduce the image for mobile devices?

  Introduction On the majority of websites, images are commonplace. They are employed either for informational or aesthetic objectives. Images must be adjusted when they are shown on a smartphone's small screen because they have a set width and height. ...

• Benefits of the new responsive design editor in AiTrillion

  Introduction: Our email builder offers drag-and-drop functionality for intuitive customization, Undo and Redo options enhance control and experimentation. Save frequently used blocks as reusable sections for efficiency. Customize layout structures ...

• Add images in the new email design editor by AiTrillion

  Introduction: Explore AiTrillion's new beta email design editor, now featuring enhanced image insertion capabilities. Elevate your email marketing with seamless image integration. 1. Login to AiTrillion & head over to templates 2. Choose the create ...

• Setup Abandoned Cart Web Push Notifications Automatically With Dynamic Product Images

  Introduction: Reduce cart abandonment and recover sales with AiTrillion's automated abandoned cart reminders. You can bring back your shoppers to complete purchases with creative push notifications. Here are the steps to setup Abondoned cart web push ...

• Steps to enable Email Annotations

  Introduction In this article, you’ll learn the step-by-step process to enable and implement Gmail Email Annotations, helping you capture attention, boost engagement, and drive more conversions from your campaigns. Requirements for enabling email ...