Mobile Banner Issues - Logo is overlapping banner text that I am not using for the header

Topic summary

A user customized the Trade theme code to achieve a specific desktop layout, but this created a mobile display problem where the logo overlaps banner text. The issue is visible in provided screenshots.

Attempted Solutions:

  • Hiding the logo on mobile resolves the overlap but isn’t ideal
  • Adding padding above text through the section editor isn’t possible

Resolution:
A PageFly support representative provided CSS code to paste into the theme.liquid file above the </body> tag, which successfully fixed the overlap issue.

Remaining Issue:
After implementing the fix, the logo appears slightly off-center on mobile. The user is seeking guidance on how to correct this alignment problem.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.

Thanks so much - does the job!! Although the logo seem slightly off center, any idea what could fix that ?