Online Support Centre


Changing the Width of Content (sections) on Your Site

By default, Sporty sites have a foreground section that is 1170 pixels wide. The website content management system (CMS) lets you decide how many columns of content you want within each foreground section, and also the width at which you set the border margins between your columns of content.

The system automatically handles different sized screens - resizing and rearranging your content for computer screens with differing screen resolution, as well as for tablets and phones.

Sporty also provides a couple of options allowing you to manually alter the section width settings:

  1. You can set specific sections on your site to be full-screen width (see
  2. You can modify the Site Settings and change the default value for the foreground section width across your entire website. 

To change the default foreground section width value, please follow these steps:

1. Login to your site and select Site Settings from the top right-hand ribbon area.

2. Click on Section/widget behaviour under the heading Look and Feel.

Site_settings.JPG3. A modal will open which allows you to choose between setting an explicit width in either pixels or percentage value. 


Your menu will automatically resize to align with the changes you have made. Sections that have been set to be Full screen width will not be impacted. 

Note: if you set a pixel width value, not all people viewing your website will see your website in exactly the same way. Users with higher resolution screens will see more of the site background while users with lower resolution screens, or viewing the site on mobile devices, will see the full-screen mobile optimised version of your site. To learn more about how different screen resolutions can impact a website appearance please see this support article.

If you choose to set a percentage value, then your sections will encompass that percentage of the screen irrespective of what the screen's resolution is. Though mobile users will still view the full-screen, mobile optimised version of your site.   

Examples where the user has defined specific pixel width

1280 x 1024


 1680 x 1050


Examples where the user has defined 90%

1280 x 1024


1680 x 1050






Was this article helpful?
0 out of 0 found this helpful