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" under the Mobile mode:
Let's consider an example:
It means the image with its original size e.g. 800x800, 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.
Adjusting the size of smaller images for the mobile version;
In case you upload the images with smaller sizes (for example logo), you can deactivate the responsive control not to stretch them on the width of mobile phone.
In this case, you can simply set up the suitable image size manually:
How to adapt the background images?
Background images are often used in web design to enhance the aesthetics of a page. However, regarding responsiveness, they can be quite challenging to work with. This is because background images have their own fixed size, which means they're unable to adapt to the screen size of different devices. As a result, the image might appear incomplete or distorted on some screens, which can hinder user experience.
However to have the best result you have the opportunity to change the background image position and sizes:
Please be aware, background images of containers/structures/stripes do not display in Outlook.
While the guidelines mentioned above provide a general starting point, it's worth noting that email clients and user preferences can vary. So, testing your emails across different devices, email clients, and screen sizes is recommended to make sure you have the best image rendering and user experience.
How to add gradient color to your design?
You can create background gradient image in any image editor and upload it to your design.
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 support@stripo.email.
We would be glad to talk with you.