ORIGIN THEME slideshow height just / removing invisible box

Store Design
, , , ,

Topic summary

A user is experiencing an unwanted invisible box appearing below product images on mobile devices when using the Origin theme. They’ve shared a screenshot demonstrating the spacing issue on their product page.

Proposed Solutions:

  • One suggestion involves adding CSS to remove bottom margins/padding and hide empty elements within .product__media-wrapper on mobile
  • Another approach targets .banner--mobile-bottom elements in section-image-banner.css to hide content causing the space

Current Status:

  • The first CSS solution did not resolve the issue
  • The second solution successfully removed the empty space on mobile, but introduced a new problem: it also affects the desktop view
  • The user now needs help hiding the slideshow on desktop while keeping it visible on mobile

The discussion remains open as the user seeks a solution that works correctly across both mobile and desktop viewports.

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

Hi,

When on mobile, there is invisible box underneath the image I can’t get rid of. Can someone help me on this? I am using Origin Theme.

https://itisoukay.com/products/sample

Screenshot 2025-04-04 at 3.53.06 PM.png
Screenshot 2025-04-04 at 3.53.06 PM.png1026×1612 125 KB

Thank you.

2

hi @gmuink

The invisible box under the image might be caused by an empty container, extra padding, or a div that isn’t rendering content but is still taking up space.

You can try adding the following CSS to your theme’s custom CSS or in the Theme > Customize > Edit code section under base.css (or theme.css, depending on your theme):

@media only screen and (max-width: 749px) {
  .product__media-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .product__media-wrapper > *:empty {
    display: none !important;
  }
}

This CSS removes any unnecessary bottom spacing and hides any empty elements inside the product media wrapper on mobile.

3

Hello @gmuink

Go to online store ----> themes ----> actions ----> edit code ----> assets ----> section-image-banner.css
add this code at the end of the file and save.

@media screen and (max-width: 749px) {
.banner--mobile-bottom:not(.banner--stacked) .banner__content {
display: none !important;
}
}​

result

98.png
98.png575×520 85.3 KB

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

1 Like
4

@Dotsquares Thank you but it did not work on my end.

5

@Rahul_dhiman Thank you. It did remove the empty space but does not affect desktop view. I see the slideshow on both desktop and mobile view. Can we hide this on desktop view?