Responsive control for images

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:

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:

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



The result on mobile view:



Next⏭️


    • Related Articles

    • How to Add Images in the AiTrillion Email Design Editor?

      Introduction: Images play a key role in making your emails more engaging and visually appealing. With the AiTrillion Email Design Editor, you can easily add images to your email campaigns to highlight products, promote offers, or enhance your brand’s ...

    • 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. ...

    • Customize the layout of product's block

      Introduction: Customizing the layout of the Product block allows you to control how your products are displayed in your emails, helping you create visually appealing and well-structured campaigns. By adjusting the layout settings in AiTrillion, you ...

    • Steps to enable Email Annotations

      Introduction Email Annotations help your marketing emails stand out by adding rich, interactive details—such as offers, expiration dates, and promotional highlights—directly in the inbox. By enabling Email Annotations in AiTrillion, you can improve ...

    • 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 ...