Vertically Oriented Product Media Thumbnails Issue (Dawn 15.4)

Store Design
, ,

Topic summary

A user encountered a layout issue in Dawn 15.4 theme where vertically oriented product media thumbnails extended beyond their container and overlapped the next section when scrolling.

Root Cause:
The thumbnail carousel had a fixed height with position:absolute, causing it not to be accounted for in the section’s total height calculation.

Solution Provided:
A community member (tim_1) shared custom CSS code to be added in the product page’s “Custom CSS” section that:

  • Sets min-height: 602px on the media gallery to match the thumbnail slider height
  • Adjusts the top position to align with the header height using var(--header-height)
  • Includes optional sticky positioning for the main image
  • Applies only on screens 750px+ width

Outcome:
The original poster confirmed the solution worked perfectly, resolving the overlap issue.

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

Hi there, wonderful community!

I’m using the Dawn 15.4 theme on my website, and I have vertically oriented media thumbnails on my product pages. I’ve noticed that when scrolling, the last image extends beyond the boundaries and overlaps into the next section.

Can anyone advise on this?
Any help would be greatly appreciated!

Wooden Frame Add-On (For Orders from This Shop Only) – DrawWithDi

image_2025-10-11_17-45-52
image_2025-10-11_17-45-521859×865 184 KB

1 Like
2

Hi @DRAWandCARE

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottow of the file:
@media screen and (min-width: 990px) {
  .collapsible-content__wrapper {
    position: sticky;
    top: 90px;
    z-index: 9999;
    margin-top:80px;
  }
}

image
image1356×513 69.7 KB

1 Like
3

You have fixed height on the thumbnail carousel, but it’s position:absolute, so not accounted for section height.

Also, i’d amend the top so that image sticks to the bottom of the header.

Use this code in section “Custom CSS”:

@media screen and (min-width: 750px) {
  media-gallery.product__column-sticky {
    top: var(--header-height,3rem);
  }
  
@media screen and (min-width: 900px) {
  media-gallery.product__column-sticky {
    min-height: 602px; /* match the height of the thumbs slider */
  }

  /* below is optional -- if main image shorter than thumbs slider, it will stick  separately*/
  slider-component:not(.thumbnail-slider) {
    position: sticky;
    top: var(--header-height,0);
  }
}
1 Like
4

Thank you so much! Worked perfectly for me :star_struck:

2 Likes