Fine-Tuning Portal Column Responsiveness
Learn how to make your column responsiveness behave exactly as you want.
Skills you will learn in this post:
Service Portal column configuration
CSS Bootstrap grid theory
Service Portal lets you create responsive layouts with a click and a drag, and it’s never been easier. But what do you do when the grid options available in Page Designer don’t result in the responsive behavior you were hoping for? Luckily, you’re not up CSS creek without a semicolon. In this post, I’ll show you how to fine-tune the responsiveness of your Service Portal columns.
The example we’ll use is a set of Icon Links that I want to display in a two by two fashion. It looks great on a large screen, like this:
But when the screen gets a little smaller my links stack on top of each other:
This stacking is totally unnecessary since I still have plenty of room to work with. Fortunately, I have a lot of control over the breakpoints of these columns. Let’s look and see how.
1: Set up Two Rows of Icon Links
You may want to follow along by setting up this easy example. First, to create the two by two grid you can use two 3-3-3-3 rows. Place icon links in the two middle columns, leaving the outer columns empty. This is what it looks like in Page Designer mode:
2: Configure Bootstrap Classes
Next, configure the breakpoints for each column. We can do that in Designer mode by clicking on the row column, then clicking the pencil in the upper right-hand corner, but I prefer to do this from Page Editor mode. To get there, use the Pages module to find and open your page, then use the Page Editor link. You’ll see something like this:
Click on the first row column then you’ll see its properties in the pane below.
The four fields in the lower right allow you to set the breakpoint classes for each column. Selecting a value in these fields is the same as applying a bootstrap class to a column. You can see that the Size-md field value is 3, and all the others are Default. Therefore, this column will have a class of col-md-3 applied to it.
This is probably a good opportunity to explain how these bootstrap classes work.
By default, a single column will take up the entire width of its container. CSS looks for bootstrap grid classes to see if any other width, besides 100%, should be applied to a column. Furthermore, it is only going to apply a class’s properties if it matches the current screen size, or if the class is smaller than the current screen size:
xs-3: The column will span 3 columns for all screen sizes.
sm-3: The column will be full-width for xs screens, but will span 3 columns for sm screens and larger.
md-3: The column will be full-width for xs and md screens, but will span 3 columns for md and lg.
lg-3: The column will span 3 columns on lg screens, and be full-width for all others.
What if more than one bootstrap class is used?
xs-3 & lg-6: The column will span 3 columns for xs/sm screens, and 6 for md/lg.
sm-6 & md-8: The column will be full-width for xs screens, span 6 columns for sm, and span 8 for md/lg.
If you’re curious about exactly what screen sizes are represented by these classes, check out this bootstrap documentation.
Now back to the task at hand…
In the previous screenshot, we saw that the column is configured to go full-width for xs/sm screens, and span 3 columns for md/lg. I don’t want my columns to start stacking until I get to an xs sized screen. Therefore, I’m going to change the Size-sm field to 3, which let’s CSS know that I want to span 3 columns for screen sizes sm and larger. It’s technically redundant to leave the Size-md field value at 3, so I’m going to change it to default:
Be sure to click Save to commit your update. We need to do this for all 8 columns (4 in each of the 2 rows). After making these updates we will see the difference in responsiveness.
3: Test It Out
Hopefully you now have a better understanding of what bootstrap grid classes are, in what order they are evaluated by CSS, and how to fine-tune them in Service Portal.