We have had many different requests regarding display on mobile / desktop.
For this example, we will show 2 things:
We will add a <style> field to where the HTML block is located with the necessary information.
If you know css, you can make any edits here. If you don’t, contact us and we’ll help you!
For context: the breaking point for websites to display the mobile version, is 768px.
So, the code below, only makes changes below that point, and leaves bigger screens untouched.
<style>
@media only screen and (max-width: 768px){
.hoola-conversation-message-outer {
display: none;
}
}
</style>
Reading the code: hoola-conversation-message-outer is the div class of the teaser message: “don’t display this when the width is smaller than 768px”
Copy and paste this above the widget html, in Shopify in bubble.liquid :