How can I reduce white space in my Spotlight Theme contact page?

Store Design
, , ,

Topic summary

Main Issue:
Users are seeking to reduce excessive white space on various pages in their Shopify stores, primarily using the Spotlight and Brooklyn themes.

Original Problem (Spotlight Theme):

  • Large white space appears under the “Contact Us” page title
  • Initial solution provided: Add CSS code targeting div#WebPixelsManagerSandboxContainer with display: contents !important; to the theme’s CSS file
  • User reported intermittent functionality, but the thread doesn’t show final resolution for this specific case

Related Issues Resolved:

Mobile Header Spacing (deezaorganics):

  • Excessive space between logo and page heading on mobile
  • Solution: Apply display: flex to .header-wrapper class to center-align elements
  • User confirmed it worked but noted concerns about heading proximity

Brooklyn Theme Spacing (ChevalDore):

  • Multiple instances of unwanted spacing on About Us and other pages
  • Solutions provided through targeted CSS adjustments:
    • Setting margin-bottom: 0px and margin-top: 0px on specific grid elements
    • Code added to base.css, style.css, theme.css, or theme.scss.css files
  • User confirmed successful implementation across multiple pages

Status: Most issues resolved with custom CSS solutions. Original poster’s intermittent problem remains unclear.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
19

Yeah, sure. Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.grid__item.large--four-fifths.push--large--one-tenth h2 {
    margin-bottom: 0px;
} 
.grid__item.large--five-sixths.push--large--one-twelfth .section-header {
    margin-bottom: 0px;
}

And Save.

Result:

Made4uoRibe_0-1713457312108.png
Made4uoRibe_0-1713457312108.png887×795 62.5 KB

Note: You can paste in the theme.scss.css if you dont find the above mention files.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like