How Do I Make My Squarespace Banner Full Screen?

To create a full-screen banner in Squarespace, you need to adjust the settings and configure your page to display the banner in the desired way. The steps vary slightly depending on whether you are using Squarespace version 7.0 or 7.1. Here's a detailed guide to help you achieve a full-screen banner on both versions of Squarespace:

Squarespace 7.1

1. Log In and Navigate to Your Site:

2. Log into your Squarespace account and go to the site where you want to add the fullscreen banner.

3. Open the Page Editor:

4. Navigate to the page where you want your full-screen banner.

5. Click on the page title to open the page editor.

6. Edit the Banner Section:

7. Hover over the banner area until you see the "Edit Section" button. Click it to open the section settings.

8. Adjust Section Height to Fullscreen:

9. In the section settings, find and click the "Height" drop-down menu.

10. Select the 'Fullscreen' option.

11. Upload Your Image:

12. In the same section settings, navigate to the background tab.
13. Click "Add Image" or drag the image file into the designated area.

14. Ensure your image is of high resolution to maintain quality when stretched to fullscreen.

15. Mobile Optimization:

16. Use the Mobile View option in the Site Styles panel to check that the banner looks good on mobile devices. Adjust as necessary.

17. Save and Preview:

18. Save your settings and preview the page to ensure the banner covers the entire screen correctly.

Squarespace 7.0

1. Log In and Navigate to Your Site:

2. Log into your Squarespace account and navigate to the site where you want to add the fullscreen banner.

3. Open the Page Editor:

4. Go to the specific page or the cover page where you want the full-screen banner.

5. Edit Page Settings:

6. Click on the "Edit" button to open the page settings.

7. Enable Banner:

8. In page settings, find the "Media" tab.

9. Upload your image under the "Banner Image" section. Ensure the image is of high resolution.

10. Adjust the Banner:

11. Depending on the template you are using, you might need to make adjustments in the CSS code to force the banner to be full screen. Some templates might not provide a straightforward option to adjust the height.

12. Add Custom CSS (if necessary):

13. Navigate to Design > Custom CSS.
14. Use the following CSS to force the banner to cover the full screen:

css .Index-page .Title--page{ height: 100vh !important; } - If you are using a different template, you might need to adjust the class names accordingly.

1. Save and Preview:
2. Save your settings and preview the page to ensure the banner is displayed full screen.

Additional Considerations

• Quality and Size of the Image: Make sure the image you use for the banner is of high resolution. Low-quality images will appear pixelated when stretched to cover the full screen.
• Mobile Responsiveness: Ensure your banner looks good on all devices. Sometimes images might need to be adjusted or cropped differently to fit mobile screens correctly.
• Browser Compatibility: Check the banner on different browsers to ensure that it displays correctly across all of them.
• Template Limitations: Some Squarespace templates might not fully support fullscreen banners, requiring custom CSS or selecting a different template.

By following these steps, you should be able to create a full-screen banner in Squarespace effectively. Always remember to save and preview your changes to ensure that everything looks as intended.