CSS Tips, Tricks and Toolkit
This guide offers some tips and tricks you can use on your popup using the power of CSS alone!
To use the custom CSS snippets listed below
Copy the CSS code to your clipboard.
Open the widget style settings in the Popups app
Scroll down the page and paste in the CSS.
Click Save to see your changes.
Mini Popup
Here's a little CSS snippet you can add to produce a neat mini popup on desktop. We use CSS media queries here to ensure that the popup still looks good on mobile devices. You may need to adjust the pixel dimensions for the top CSS rule if you are using a logo or more text.
/* Tydal mini popup */
@media screen and (min-width: 600px) {
.ba_widget_main_design {
width: 450px !important;
height: 450px !important;
border-radius: 20px !important;
}
}
@media screen and (max-width: 600px) {
.ba_widget_main_design {
width: 90% !important;
max-height: 90% !important;
border-radius: 20px !important;
}
}
Play with animated gradients
Add some movement magic to your color background with CSS anmiated gradients. There's some great websites out there for generating these so you don't even have to do the hard work! Here's the site we used to create the animated background below. Make sure you use the right selector for the popup and add the !important rule once you've copied any code from third-party sites.
/* Animated gradient*/
.ba_widget_parent {
animation: animateBg 8s linear infinite !important;
background-image: linear-gradient(0deg,#bd4faf,#5794db,#bd4faf,#5794db) !important;
background-size: 100% 300% !important;
}
@keyframes animateBg {
0% { background-position: 0% 0% ; }
100% { background-position: 0% 100%; }
}
Adjusting your logo
The logo uploader accepts files that are 60px by 60px but if you have a wide logo and it appears too small in your popup, you may add this little CSS snippet to adjust your logo and make it look better! You can adjust the pixel dimension for the height according to your preference.
/* Logo adjustment */
.ba_widget_logo_holder svg, .ba_widget_logo_holder img {
height: 110px !important;
width: auto !important;
}
Add an alternate image for the popup on mobile
The popup is mobile friendly by default, however some images might look better on larger screens, and not as good on smaller screens. To add an alternate image for customers on mobile devices, paste the CSS below in to the in app CSS editor. Be sure to change out the URL section to your own image URL.
/* Show alternate image on mobile */
@media only screen and (max-width: 600px) {
.ba_widget_right_content {
background-image: url(https://images.unsplash.com/photo-1647163641067-c7ee34cfcb80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3328&q=80);
}
}