Hi all. I’m trying to add a callout that I want to display differently on phones and on the desktop. I’m hoping to be able to use something like .is-phone so that I can specify arbitrarily different settings for the callout, but mainly I’m adding a width: 400px; property, which looks right on the desktop but is too wide on the phone. Any help with this would be appreciated!
It will depend on what CSS you are using now, if you want to change all callouts, only certain ones, etc., but adding the .is-phone class in front of whatever you have should do it. e.g. using a simple custom chatbot callout.
.callout[data-callout="chatbot"] {
--callout-color: 180, 190, 254;
--callout-icon: "lucide-bot";
width: 400px;
}
.is-phone .callout[data-callout="chatbot"] {
--callout-color: 180, 190, 254;
--callout-icon: "lucide-bot";
width: 250px;
}
Tested with the default and Minimal themes on macOS and iOS.
Perfect. This works on Windows + Android too. It seems you can leave out any properties in the second .callout block that you want to leave unchanged, since it’ll inherit the properties from the first block. Thank you!
1 Like
Yup, that works as well. Glad it worked out!
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.