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.

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.

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.

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:

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 support@stripo.email.

We would be glad to talk with you.