whenever we open this page, it opens properly but when this page is refreshed, this upper part of the page goes behind the header.
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.
1 Like
hey @sagarweb try this one
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the ----->
if this code work please do not forget to like and mark it solution
1 Like
Hey @sagarweb
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
1 Like
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
If this was helpful, hit the like button and accept the solution.
Thanks