ORIGIN THEME slideshow height just / removing invisible box

[gmuink]

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

Thank you.

[Dotsquares]

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.

[gmuink]

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

[Rahul_dhiman]

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

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

[gmuink]

@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?