In website touchpoints, you have the option to add custom CSS classes when you edit them under Appearance > Editor:
These classes will be added to the container (#datatrics-box-container) of the website touchpoint.
This means you can add any styling for any class you add to the touchpoint, in the project theme settings. In the screenshot above, the CSS class “datatrics-academy--smaller” is added to the touchpoint.
Now let’s add styling that makes the touchpoint smaller, to the project theme:
All touchpoints with the added CSS class “datatrics-academy--smaller” now have this styling. This method prevents you from copy-pasting CSS from touchpoint to touchpoint and having to change it everywhere when styling needs to be changed.
You can use multiple CSS classes just like you would normally do, simply separate them with a space.
Example CSS used in this article:
@media (min-width: 580px) {
#datatrics-box-container.datatrics-academy--smaller {
width: 320px;
}
}
Example CSS class used in this article:
datatrics-academy--smaller