Popular custom CSS snippets

Why custom CSS?

There are a lot of different requests to change the style of the elements in Reelfy, but the built-in options are limited. If there is not an option available for a specific request, utilizing custom CSS is a highly flexible and effective way to address the request.

How to add your custom CSS code in Reelfy

From the Reelfy main menu, click Settings, go to Custom codes, then you can add your css code in the Custom CSS box.

Please remember to Save your work before leaving.

Change style for the title, description of your gallery

If you want to change the font-size, font-family, color, spacing… for the title, description of your gallery, you can use custom CSS.

.reelfy-gallery .rf__title{
    font-size: 42px;
    font-weight: 600;
    color: #b68640;
}
.reelfy-gallery .rf__subtitle{
    font-size: 23px;
    font-weight: 600;
    color: #d2ab67;
}

Change arrows of carousel

.rf-carousel button.flickityrf-prev-next-button{
    background-repeat: no-repeat;
    background-position: center center;
}

.flickityrf-prev-next-button.next{
    add background-image
}

.flickityrf-prev-next-button.previous{
    add background-image
}

button.flickityrf-prev-next-button svg{
    display: none;
}

Fit video empty product

.rf-lightbox-wrapper.rf-empty-product {
     max-width: calc((100vh - 100px) * 9 / 16) !important;
}