Try ShortPoint nowBy default, the shadow for the Tiles Design Element will resize depending on the length of your Title. This sometimes results in unequal shadow height like in the example below:
This article will demonstrate how to equalize the height of the shadows:
TABLE OF CONTENTS
Prerequisites
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
- You must already have a Tiles Design Element on your SharePoint page.
Interactive Tutorial
Before starting the interactive tutorial, copy the code below:
.shortpoint-tile-content {
top: 100px !important;
}NOTEThis Custom CSS will only work for the Default Tile design style:
Step-by-step Tutorial
Follow the steps below for a detailed guide on how to equalize the shadow height:
Step 1: Edit the ShortPoint Web Part
- Go to the SharePoint page you want to use and click Edit.
- Select the ShortPoint tag.
- Click the pencil icon.
Step 2: Copy the Custom CSS
Copy the custom CSS code below:
.shortpoint-tile-content {
top: 100px !important;
}NOTEThis Custom CSS will only work for the Default Tile design style:
Step 3: Edit the Tiles Design Element
NOTEBefore proceeding, make sure you already have the Tiles Design Element on your page. To learn how to insert it to your page check out How to Customize the Tiles Design Element.
- Click the Tiles tag.
- Select the cogwheel icon.
Step 4: Paste the Custom CSS
- Click the next icon.
- Navigate to the Custom CSS tab.
- Paste the copied code in the Custom CSS field.
- Modify the top value according to your preference.
- Once satisfied, click the green check mark.
Step 5: Save
- Click the eye icon to see your page in real-time.
- Click Save to apply your changes.
That’s it! You can now equalize the height of the Shadow for your Tiles Design Element.
Related articles:
