CSS Tips, Tricks and Toolkit

This guide offers some tips and tricks you can use on your Rivo Email Popup using the power of CSS alone

Laurence Leech avatar
Written by Laurence Leech
Updated over a week ago

CSS Tips, Tricks and Toolkit

This guide offers some tips and tricks you can use on your popup using the power of CSS alone!

This guide is an ongoing resource we'll be updating regularly.

To use the custom CSS snippets listed below

  1. Copy the CSS code to your clipboard.

  2. Open the widget style settings in the Popups app

  3. Scroll down the page and paste in the CSS.

  4. Click **Save** to see your changes.

Tips and Tricks in this article:

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.


/* Rivo 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);

Did this answer your question?