How to change accordion blocks text alignment and width

This tutorial will show you how to change accordion blocks text alignment and width.

The advantages of having the ability to changing the accordion block text alignment and width are firstly, adjusting the text alignment can improve the readability and visual appeal of the content. Depending on the design of the website and the amount of text in each accordion block, center-aligning or left-aligning the text may look better than keeping it justified.

Secondly, changing the width of the accordion blocks can also improve the overall look and feel of the website. It can make the content more prominent and easier to read, especially if the original width is too narrow or too wide.

Finally, adjusting the text alignment and width can also help with responsive design. By optimizing the layout for different screen sizes, the website can offer a better user experience on all devices.

Oddly enough, the default setting for the accordion block description is set to Medium Width, which can look a little weird if you have a longer description.

Fortunately, this is an easy fix, however the setting is just a little hard to find:

Complexity: Easy


Step 1

Click on the Squarespace Accordion Block to change the settings.

accordion step 1

Step 2

Click on the Design Tab.

accordion step 2

Step 3

Click on the description arrow to change the width setting from M to L, or click the three dots for more granular control.

To change the alignment of the title, simply click on the title arrow.

accordion step 3
 


All work in this guide is provided ?“AS IS”. Other than as provided in this agreement, this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a developer.

Primitus Consultancy

We work with small and medium-sized businesses to help create a professional online presence. We provide a one shop full-service design studio in London, United Kingdom. 

https://primitusconsultancy.co.uk
Previous
Previous

How to customise bullet points with symbols or emojis in Squarespace

Next
Next

How to customise bullet points with an image in Squarespace