CSS Snippets

When you choose the Gallery layout style in the Posts module, by default there is no space between the featured images for each Post in the gallery, such as in the following screenshot. You can use the following CSS rule to increase spacing between the featured images in the display: .fl-post-gallery-post {margin: 20px;} Insert the…

By default, if you display captions in the Gallery module, the caption is cut off at the first line. This happens whether the caption is set to On hover or Below photo. and both Collage and Thumbnail displays. You can use the following CSS snippet to wrap a full caption at the bottom of your…

To use a CSS gradient as a row background, you need to do the following: Get the CSS for your gradient. Add a custom CSS class to your row. Add the custom CSS for the gradient. Get the CSS for your gradient We like using this CSS Gradient Generator Tool. You can choose from preset…

Most of the time, full-width images don’t look that great on mobile view, because they are cropped (which is better than being stretched). One way to get around this is to change the background image once it reaches the mobile responsive breakpoint. Here’s how. To change the background image for a row on mobile view: Open…

A full-width row spans the entire width of the page from edge to edge. If you use a third party theme, you may need to add some additional CSS to get your rows to be full width. Here’s something you can try. First, find the ID or class name of your theme’s content wrapper. If…

You can add rounded corners to a column background or border or a photo. The CSS rule applies to the <img> tag, so the photos can be placed in any module, as long as they are converted to <img> in the HTML. Tip: you can add other effects to photos, such as cropping them into…