How can I reduce the space between the rich text and the divider line in Symmetry theme?

Store Design

Topic summary

Issue: On a Shopify store using the Symmetry theme, the page heading has too much vertical space above the divider line directly beneath it, most noticeable on mobile. The requester wants the title and divider to appear closer together.

Goal: Reduce the vertical gap between the heading and the divider line (mobile emphasis), likely via CSS adjustments.

Context: A live store URL was provided for reference to observe the spacing behavior.

Requested help: Guidance on which CSS to modify (e.g., margins/padding for the heading, rich text, or divider) and how to target mobile specifically if needed.

Status: No solutions or code provided yet; the thread is open with the user seeking CSS-based recommendations.

Open questions:

  • Which selectors in Symmetry control this spacing?
  • Should changes be mobile-specific (media queries) or global?
Summarized with AI on December 15. AI used: gpt-5.
1

I’m using the Symmetry theme and I’m trying to reduce the vertical space between a page heading and the divider line directly below it, especially on mobile.

At the moment there is too much empty space between the title and the line, and I’d like them to appear much closer together.

This is my store:
https://www.herbalshopdeutschland.com/

thanks

1 Like
2

Hi @mdb1919911

Well, as you may have guessed, I think the issue is your logo, it is a bit big plus it have some padding.

You could try to reduce its height by removing name, street and phone as it is very tiny, especially on mobile.

But if youdo not want to do that there are a few things you can try. As your logo have some white space at top and bottom you can try to remove padding on logo from this element

.pageheader .logo {
    text-align: center;
    padding: 20px 0;
}

Try to add this to your header section, Custom CSS setting :slight_smile:

.pageheader .logo {
    padding: 0;
}

Next step, in the same Custom CSS can be reducing the width to

.logo img {
    width: 200px;
}

You also need mobiel styles

@media only screen and (max-width: 767.98px) {
    .pageheader .logo {
        padding: 0;
    }
    .logo img {
        width: 175px;
    }
}

But again, on those dimensions text at the bottom is unreadable, so think about the first suggestion also.

3

Add this in Custom CSS to reduce space between heading and divider:

.pageheader .rte h1, .pageheader .rte h2 { margin-bottom: 5px; }
@media (max-width: 767.98px) { .pageheader .rte h1, .pageheader .rte h2 { margin-bottom: 3px; } }

Adjust the margin-bottom values as needed.

4

Hii @mdb1919911

Step 1: Open Theme Edit code

  1. Go to Online Store → Themes
  2. Click Edit code on your Symmetry theme

Open your main CSS file and search for the class:

.fully-spaced-row,
.fully-spaced-row--small

Modify the existing CSS to adjust the vertical spacing:

.fully-spaced-row,
.fully-spaced-row--small {
  margin-top: 30px;
  margin-bottom: 50px;
}

OR If you have settings in theme customization to reduce the vertical space

Step 1: Open Theme Customizer

  1. Go to Online Store → Themes
  2. Click Customize on your Symmetry theme

Step 2: Open Theme Settings

  1. In the left panel, click Theme settings
  2. Open Layout or Spacing (naming may vary slightly)
  3. Adjust Section Spacing
    Look for settings related to:
  • Row spacing
  • Section spacing
  • Fully spaced row

You will see values that correspond to:

  • Top spacing → 30px
  • Bottom spacing → 50px