Decrease padding above heading styles on pages

Store Design

Topic summary

Goal: Reduce the space above page headings (H1–H6) in the Atlantic theme, ideally only for certain levels (e.g., H4–H6). Screenshots highlight the area and show the source of styles.

Proposed fix: Add custom CSS targeting heading tags. Steps suggested: Online Store > Theme > Edit code > Assets (theme.css or styles.scss.liquid), then add rules like h4/h5/h6 { padding-top: … }.

What was tried: Custom CSS for H1–H6 with specific padding-top values was added to assets/theme.css.liquid (no theme.css existed). Result: No visual change; the padding/space remained the same. The author asked if the code was placed in the wrong file.

Requests: Multiple replies asked for the store URL and password to inspect and provide an exact solution.

Latest update: A helper asked to continue via email; the author requested guidance be shared publicly on the forum.

Status: Unresolved. Key next step is reviewing the live page (URL/password) or providing theme-specific guidance in-forum. Images are important to understand the exact spacing in question.

Summarized with AI on December 16. AI used: gpt-5.
1

I want to decrease the amount of padding above the default Heading style (1,2,3,4,5) available to me on pages (see red arrows on accompanying jpeg, and next image shows where I’m getting these styles from on the page). My theme is Atlantic. I’ve searched but can’t find an answer to a seemingly simple thing to do. Can I change the padding on just certain ones, ie Heading style 4,5,6? Thanks!

decrease padding here.jpg
decrease padding here.jpg1261×1721 135 KB

Screenshot 2024-10-17 at 12.20.44.png
Screenshot 2024-10-17 at 12.20.44.png357×595 16.4 KB

1 Like
2

Hello @kathykate
would you like to share this page URL and password if any please.
so i can check and provide you possible solution for your question.

3

Hi @kathykate ,

To decrease the padding above specific heading styles (H4, H5, H6) in the Atlantic theme, you can do this by customizing your CSS.

Follow these steps:

  1. Online Store > Theme > Edit code

  2. Locate the theme.css or styles.scss.liquid file (usually under Assets).

  3. Add the following css at the bottom of the file to target the padding for specific heading tags:

/* Adjust padding above specific headings */
h4 {
    padding-top: 10px; /* Adjust as needed */
}

h5 {
    padding-top: 8px; /* Adjust as needed */
}

h6 {
    padding-top: 5px; /* Adjust as needed */
}

If I was able to help you, please don’t forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma

4

Hello @kathykate
Please share your store URL and password.
So that I will check and let you know the exact solution here.

5

HI, thanks for the advice!
I put this code into my assets/theme.css.liquid but the padding has stayed exactly the same.
/* Adjust padding above specific headings */ h1 { padding-top: 13px;} h2 { padding-top: 11px;} h3 { padding-top: 9px;} h4 { padding-top: 7px;} h5 { padding-top: 5px;} h6 { padding-top: 3px;}

6

Hi, Thank you for trying to help me! I added this code below as a test, to my assets/theme.css.liquid but the padding has remained the same in all instances. (I didn’t have theme.css). Am I putting it in the wrong place?

/* Adjust padding above specific headings */ h1 { padding-top: 13px;} h2 { padding-top: 11px;} h3 { padding-top: 9px;} h4 { padding-top: 7px;} h5 { padding-top: 5px;} h6 { padding-top: 3px;}

Screenshot 2024-10-17 at 14.16.05.png
Screenshot 2024-10-17 at 14.16.05.png1754×285 32.6 KB

7

Hey @kathykate ,

I understand what you’re saying. Could you please send me a message via email so we can discuss this further?

Thanks

8

Hey there, thanks for reply. I’m quite good at following instruction so if you can let me know on the forum, it would be much appreciated! Thanks