Some merchants may have long modals filled with Kiwi elements, which work great on desktops. However, on mobile devices, this can create friction for customers who must scroll to the top of the chart to close the modal.
A Simple Solution
To enhance the user experience, you can make the modal close button sticky, allowing it to scroll up and down with the chart content. This means users won't need to scroll back to the top to close the modal.
Since there isn’t a built-in option to enable this feature, you’ll need to add some custom CSS code.
Custom CSS Code
Add the following CSS code to make the close button sticky:
@media (max-width: 768px) {
.kiwi-sizing-modal.modal-style-0 .ks-modal-close {
position: sticky;
position: -webkit-sticky; /* For iOS Safari */
float: right;
}
}Steps to Insert Custom CSS
Navigate to "Styles & Settings."
Click on "Advanced."
Select "Custom CSS."
Paste the provided code into the Custom CSS section.
Click the Save Changes button and refresh the page on a mobile device.
Result
On the desktop, the modal close icon stays fixed at the top right when you scroll down, which is the default behavior. But on mobile, the close button moves with the content, making it easy for users to close the chart anytime.
To see how this works, watch our video where I show the before and after, along with the steps to implement this change.
If you need help, feel free to reach out to our support team. We’re happy to assist you!