In this article, we will cover:
How to make a TINT embed Mobile Responsive
To make your TINT board responsive on a mobile device you may do either of the following:
In the dashboard where you generate a TINT embed code, make the width of your TINT 100% and do not specify the number of columns.
The other method is applying CSS. By adding responsive media queries to the .tintup class div ensures that the widget adapts to different screen sizes. By using media queries, you can specify unique CSS styles for various viewport widths, such as mobile, tablet, or desktop. Any responsive styling applied to the widget's parent div (i.e., the .tintup class) will automatically affect the widget itself. This approach gives you complete control over the widget’s appearance across devices, allowing you to fine-tune its layout, size, and behavior for an optimal user experience on every screen size. For example:
@media screen and (max-width: 600px) {
.tintup{
max-width: 300px!important;}
}
You can also customize the appearance of individual elements within the TINT embed. For instance, you might want to adjust the positioning of specific elements, such as moving the popup close "X" closer on mobile devices than on desktop screens.
For example:
To learn how to add CSS to your personalization to modify your TINT embed, click here.
How to make a TINT form embed Mobile Reponsive
Making a TINT form embed mobile responsive depends on the overall design and structure of your website. To ensure it works smoothly across all devices, you can add CSS media queries that adjust the form’s appearance based on screen size.
For example:
@media screen and (max-width: 600px) {
.tintup{
min-width: 300px!important;}
}
For more information on CSS media queries and how to use them, click here.
If you run into any issues or have questions regarding making embeds Mobile Reponsive, please don't hesitate to contact us at support@tintup.com.
Comments
Article is closed for comments.