Note: To reduce the size of your touchpoints, you need little knowledge about HTML and CSS.
Reducing the size of a touchpoint is an easy task if you know what to do. There a 2 different ways to accomplish this.
Using CSS classes
In every project, there are custom CSS classes you can use for resizing touchpoints. These CSS classes are stored in your theme settings. If these are not added in your project, you can paste (or change) the code below:
@media (min-width: 580px) {
#datatrics-box-container.datatrics-box--smaller {
width: 320px;
}
}
@media (min-width: 580px) {
#datatrics-box-container.datatrics-box--smallest {
width: 260px;
}
}
Now you can use these classes in your touchpoint:
datatrics-box--smaller
datatrics-box--smallest
Custom code in HTML touchpoints
In order to accomplish this, you need to know the name of the specific element HTML element you want to reduce.
In most cases you can try to use the following element:
#datatrics-box-container .datatrics-box {}
If you want to reduce an element of a touchpoint, check our stylesheet to reduce the size of another element. You might want to resize a custom element. Therefore, inspect the element, and copy the CSS selector into the CSS editor.
In Datatrics, you can use the ‘What You See Is What You Get’ (WYSIWYG) editor (Appearance >Editor) to check if the changes you made meet your expectations. We also recommend checking it via the ‘Live Preview’ button.
For resizing touchpoints you can use the properties height and width. The values you can use are percentages of the element (80%) or pixels (200px)
@media (min-width: 580px) {
#datatrics-box-container .datatrics-box {
width: 80%;
height: 100px;
}
}
You can also create your own custom CSS classes in the CSS theme of your Datatrics project. Be careful though. This can lead to undesirable changes to your existing touchpoints.