Online Support Centre

Follow

Changing the width of content (sections) displayed on your site

By default, all Sporty sites are built using a 1170px wide section.   This is an industry standard for CMS websites, as it allows your site to behave responsively on tablets or mobile phones.  In addition, this format proportions the columns you are using based on percentages ensuring proper sizing for different screen resolutions found on different computers.  You can see if you shrink the size of your internet window, when you have a Sporty page open, it'll adjust proportionately.

Sporty also provides an option for you to tailor your website design according to your needs in two ways.

  1. 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).
  2. You can modify your Site Settings and set an alternate value for all sections displayed on your site.

To change your whole site to use an alternative design, please follow these steps.

1. Click Site Settings

2. Click 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 Pixels or a percentage (%) value for Section width. 

section_behaviour.JPG

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 resolutions than your own PC may see more of the site background. Users with lower resolution devices, or viewing the site on mobile devices will see the full screen, mobile optimised version of your site.   

If you set a % value, your sections will encompass that percentage of the screen, irrespective of what the users 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

1280_x_1024.PNG

 1680 x 1050

1680_x_1050.PNG

Samples where user has defined 90%

1280 x 1024

1280_x_1024_2.PNG

1680 x 1050

1680_x_1050_2.PNG

 

 

 

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

Comments