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 how wide you want the border margins between your columns of content.
The system automatically handles different sized screens, resizing and rearranging your content responsively for different computer screens with differing screen resolution as well as for tablets and phones.
Sporty also provides an option for you to tailor your website design according to your needs in two ways.
- You can change specific sections on your site to be set to full screen width (see https://support.sportsground.com/hc/en-us/articles/219333248-How-to-create-a-full-width-section).
- You can modify your Site Settings and change the default value for the foreground section of your entire website from 1170 pixels to another explicit value or a percentage of the width of each person's screen.
To change your whole site to use an alternative default foreground width, please follow these steps.
1. Login to your site and click Site Settings from the top ribbon area.
2. Click Section/widget behaviour under the Heading Look and Feel.
3. A modal will open which allows you to choose between setting an explicit width in Pixels or a percentage (%) value for Section width.
Your menu will automatically resize to align with the section width you have defined. Sections that have been checked on for Full screen width will not be impacted by any changes you make to your section settings.
It is important to note that 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. 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 about how different screen resolutions can make a website appear differently on different computers please see this support article.
If you set a % value, your sections will encompass that percentage of the screen, irrespective of what everyone's screen resolution is. People viewing your site will always see that proportion of the background on a PC. People viewing the site on mobile devices will see the full screen, mobile optimised version of your site.
Examples where user has defined specific PX width
1280 x 1024
1680 x 1050
Samples where user has defined 90%
1280 x 1024
1680 x 1050