Responsive control for images

In this article, you will learn about image adaptivity, when it's best for use, and how to turn it off for an image.

Oleh Tokariev avatar
Written by Oleh Tokariev
Updated over a week ago

Stripo templates support @media quires that allow you to adapt your template's content to the mobile device's layout, facilitating usability and navigation as well as good displaying.

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. 640x427, will be adapted and fully displayed on a mobile screen.

In Stripo 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 more than the mobile device's screen width.

Please be advised 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:

Thank you for taking the time to read our articles. We hope you will find this information helpful.

โ€‹If you have any additional questions, please email us at

We would be glad to talk with you.

Did this answer your question?