Required Permissions: Account Administrator, Content Administrator, Editor, Author
When a tile is configured with the Expand Image action, clicking it opens an overlay that displays the image alongside its caption and description.
By default, the image occupies approximately 70% of the overlay, while the caption and description take up the remaining 30%. You can use custom CSS to adjust these proportions to better suit your site's design.
Adjust the image and caption areas
To change the amount of space allocated to the image and caption, add the following CSS:
.overlay-asset-wrapper{
width: 30%;
}
.overlay-caption-wrapper{
width: 70%;
}
The custom CSS above allocates 30% of the overlay width to the image on the left and 70% to the caption and description on the right.
You can change the percentage values to achieve your preferred layout. Make sure the two values add up to 100% to maintain the intended proportions.
Add the Custom CSS to Your Site
You can add the CSS at either the site level or the theme level, depending on where you want the changes to apply.
Option 1: Add CSS to an Individual Site
Use this option if you want the changes to apply only to one site.
Go to the Sites Dashboard.
Select the site you want to update.
Click Edit to open the Site Editor.
Select Styling.
Under Local Site Styles, click Edit Site CSS.
Paste the custom CSS into the editor.
Save your changes and preview the site to verify the layout.
Option 2: Add CSS to a Theme
Use this option if you want the changes to apply to all sites that use the same theme.
Go to the Theme Dashboard.
Select the theme you want to update.
Click Edit to open the Theme Editor.
Select Custom CSS.
Paste the custom CSS into the editor.
Save your changes and check the affected sites.
For more information, see Writing Custom CSS.
Troubleshooting Tips
The layout hasn't changed: Confirm that the CSS was saved and that the class names match the examples above.
The image and caption proportions look incorrect: Check that the width values are set as intended and add up to 100%.
Other sites are affected: If you added the CSS through the Theme Editor, it applies to all sites using that theme. Move the CSS to the individual site's CSS editor if you want to limit its scope.
Note: Custom CSS changes the layout of the expanded image overlay. Preview your site after making changes to confirm that the image and caption display as expected.
Need Help?
Contact Zoomforth Customer Support through the in-app chat or email support@zoomforth.com.