Why does my dawn theme image gallery overlap on mobile view?

Store Design
, , ,

Topic summary

A custom image gallery page built with the Dawn theme displays correctly on desktop but experiences overlap issues on mobile when an “image banner” section is added above it.

Technical Details:

  • Custom code is located in “custom-collage.liquid”
  • Problem is mobile-specific; desktop renders properly
  • Screenshots show the overlap occurring between the banner and gallery sections

Resolution:

  • Adding top margin to the image gallery fixed the mobile overlap issue
  • User also removed unnecessary buttons that were contributing to the problem

The issue appears resolved through CSS margin adjustments targeting the mobile view.

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

I have created a custom image gallery page for my website which is working fine, however when I add an “image banner” section to this page it overlaps with my image gallery section. This seems to happen on the MOBILE version only (see attached images), while the desktop version is working fine. I am using dawn theme and custom code is under “custom-collage.liquid”. Any help is greatly appreciated. Thank you very much.

url to page: https://eggculture.com/pages/gallery

password: iguO4rRDi2yflpv

mobileIssue.jpg
mobileIssue.jpg1170×2532 223 KB

workingDesktop.png
workingDesktop.png2912×1870 532 KB

2

Screen Shot 2023-02-22 at 4.35.50 PM.png
Screen Shot 2023-02-22 at 4.35.50 PM.png610×416 32.9 KB

adding a margin to the top of the image gallery title on mobile fixed the issue. However I also realized I have no need for the buttons and upon removing them there is no longer any overlap.