[Required Permissions: Account Administrator, Content Administrator, Editor, Author]
A tile, assigned with expanding image action, renders an overlay when the tile is clicked. The overlay displays the asset (image) on the left and the caption and more text descriptions on the right. The default ratio of the overlay is around 70% of the area are assigned to the asset, and around 30% goes to the text (caption and description).
If you prefer a different ratio for your site design, say 40% of the overlay you want to allocate for the asset, instead, you can use the custom CSS below.
Custom CSS to change the ratio of the asset and caption areas for a tile assigned with expanded image action:
.overlay-asset-wrapper{
width: 30%;
}
.overlay-caption-wrapper{
width: 70%;
}
The custom CSS above gives the asset 30% of the overlay area on the left, and 70% for the caption.
Feel free to change the percentage values, as preferred.
Below are the ways on how you can add the custom CSS for your site:
1. Via the site editor
This isolates the custom CSS to apply only to the individual site and doesn't require administrator access to accomplish. You can refer to this article for more details.
2. Via theme editor
Custom CSS applied through the theme editor affects all sites using the theme. Administrator access is also required to pull up the theme editor and apply the changes. You can refer to this article for more details.