How to adjust the padding on gallery sections for mobile only

Hi there, 

Does anyone know how to adjust the padding for a gallery section on mobile only?

It looks fine on web but when the site is opened on mobile, it has larger gaps between the gallery and the text above/below. 

There are gallery sections on both the home page and project page, where this issue occurs. 

Any help would be greatly appreciated. 

@KTK Would it be possible to share the site URL so I can identify the issue?

Here you go! 

https://www.ktkconcrete.co.nz/

@KTK Here's a code snippet to fix the issue. Let me know how it goes. Thanks!

@media only screen and (max-width: 640px) {
	section[data-section-id="64d0612392f77a56f06c23f6"] .gallery-slideshow-wrapper, #collection-646c7dbed1cf465e6b9c9a75 .gallery-slideshow-wrapper {
		max-height: 200px !important;
	}
	section[data-section-id="64d0612392f77a56f06c23f6"] .gallery-slideshow, #collection-646c7dbed1cf465e6b9c9a75 .gallery-slideshow {
		height: auto !important;
		margin-bottom: 80px !important;
	}
}

@LesumThank you for this! I have added the code and this is what happens. 

The code message comes up on the live site and it changes the top section as opposed to the galleries on the project page and home page. 

Add these code on the Custom CSS section.

@media only screen and (max-width: 767px) {
  #collection-646c7dbed1cf465e6b9c9a75, #collection-64216069dee9703e62977c6e {
    .gallery-slideshow[data-show-captions="true"][data-thumbnails="false"] {
      margin-bottom: 70px !important;
      height: 60vw !important;
    }
  }
}

Hello,

I just tried this solution and it did nothing. Is there another way to edit the margins?

Website: lemmondp.com