spacing issue

Technical Q&A

Topic summary

A user reports a spacing issue where page content slides behind the header upon refresh, though it displays correctly on initial load. The affected page is an exchange offer landing page.

Proposed Solutions:

Three community members offered CSS-based fixes:

  • JavaScript approach: Add a script in theme.liquid before the </body> tag to adjust spacing dynamically
  • CSS approach: Add margin-top styling (7.7rem) to the specific hero section ID in base.css

All solutions target the positioning of the upper page section relative to the fixed header. Screenshots demonstrate the expected result after applying fixes.

Status: Multiple solutions provided, awaiting user confirmation on which approach resolves the issue.

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

Hello @sagarweb
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

#m-hero-section-template--18247920386226__image_with_text_2_awQYUK {
margin-top: 7.7rem !important;
}

result

12.png
12.png1008×527 338 KB

If this was helpful, hit the like button and accept the solution.
Thanks