How to Keep All Tiles in a Single Row Using Custom CSS

By default, when you minimize your browser window, the Tiles may wrap to the second row, making the design look less appealing.

This article shows how to keep tiles in a single row using custom CSS, even when the screen is minimized.

BEFORE	AFTER

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Copy and Customize Code
    • Option 1: If your Tiles only have text:
    • Option 2: If your Tiles only have icons:
  • Step 3: Edit the Tiles Design Element
  • Step 4: Paste the Code
  • Step 5: Save

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 the Tiles Design Element on your SharePoint page.

Step-by-step Tutorial

Follow the steps to keep your tiles in a single row:

Step 1: Edit the ShortPoint Web Part

Go to the SharePoint page you want to use and click Edit:

Close the Toolbox:

Select the ShortPoint web part and click the Edit Properties icon:

Step 2: Copy and Customize Code

Copy the Custom CSS that fits your needs.

Option 1: If your Tiles only have text:

display: flex;
flex-wrap: nowrap;

& > .sp-type-tile {
  flex-basis: 0;
  flex-grow: 1;
  
  .shortpoint-tile-title-inner {
    font-size: clamp(0.3rem, 1vw, 2rem) !important; 
  }

Option 2: If your Tiles only have icons:

display: flex;
flex-wrap: nowrap;

& > .sp-type-tile {
  flex-basis: 0;
  flex-grow: 1;
}
.shortpoint-icon, .shortpoint-icon:before, .shortpoint-icon:after {
font-size: 15px;
}

Modify the code according to your preferences. Here are the properties you can modify:

• font-size - lets you modify the size of the icons.

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 add Tiles, check out How to Customize the Tiles Design Element.

Click the Tiles tag:

Select the cogwheel icon:

Step 4: Paste the Code

Click the next icon:

Go to the Custom CSS tab:

Paste the code in the field provided:

Step 5: Save

Click the green check mark:

Click Save to keep your changes:

Congratulations! Your Tiles will now be in a single row, even if you minimize your screen size.

Related articles:

• How to Change the Hover Color of the Tagline and Description in the Events Design Element
• Creative Custom CSS for the Button Design Element
• How to Add Gradient Effect to the Button Design Element Using Custom CSS