Removing extra code on mobile - but keeping image width

Hello,

I pulled the code below to remove the extra buffer between captions and image blocks -- and it worked. It has an undesired side effect that vertical images are now very narrow and small. Wondering how I can remove the padding but still keep images at full width on mobile?

All of my CSS below - relevant lines in red. Thank you.

Good page (all horizontal image): https://llama-cobalt-lm35.squarespace.com/covid

Bad page (vertical image): https://llama-cobalt-lm35.squarespace.com/artists

password: everke

/* Center captions within the gallery grid */
/* Apply to all screen sizes */
.gallery-lightbox-background {
  opacity: 1;
  background-color: white; /* Change the background color here */
}

/* Adjusting margin for the caption */
.gallery-caption .gallery-caption-content {
   font-size: 18px !important;
}
  /* Center captions using flexbox */
  .gallery-caption-grid-simple,
  .gallery-caption-grid-strips,
  .gallery-caption-grid-masonry {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 100% !important;
    text-align: center !important;
  }

@media only screen and (max-width: 767px) {
    .gallery-slideshow[data-show-captions="true"][data-thumbnails="false"] {
      margin-bottom: 70px !important;
      height: 60vw !important;
    }
    .gallery-caption {
        margin-top: 0 !important;
  
    }
  .gallery-caption .gallery-caption-content {
   font-size: 12px !important;
}

}

Remove these padding?

Thanks for the reply. Yes that was the padding I was looking to remove originally.

That looks fine -- but now the goal would be to get Joseph Beuys/other vertical images to be the whole width.

It's accomplishing both that I'm struggling with. Thanks!

@GSS2  You can try adding this code snippet to remove the padding (first block of code) and display the vertical images in full-width (second block of code with the section-id's of all the vertical images):

@media only screen and (max-width: 767px) {
	.gallery-slideshow[data-show-captions="true"][data-thumbnails="false"] {
		margin-bottom: 15px !important;
		height: auto !important;
	}
	section[data-section-id="64e7e8fceefb6573d3c7f51d"], section[data-section-id="64e7e8fceefb6573d3c7f520"], section[data-section-id="64e7e8fceefb6573d3c7f523"], section[data-section-id="64ecfe944c69e03413abac1f"], section[data-section-id="64e7e8fceefb6573d3c7f529"], section[data-section-id="64e7e8fceefb6573d3c7f527"], section[data-section-id="64e7e8fceefb6573d3c7f52b"], section[data-section-id="64e8f087ae3f7a4eba6673f2"] {
		.gallery-slideshow[data-show-captions="true"][data-thumbnails="false"] {
			height: 100vw !important;
		}
	}
}

Thank you for the reply! 

We're close - but we lost the captions. Thoughts on adding those back in? 

@GSS2 Can you also please add this code after the code you just added:

@media only screen and (max-width: 767px) {	
	.gallery-caption-slideshow {
		height: auto !important;
		margin-top: 5px !important;
	}
	.gallery-slideshow[data-show-captions="true"][data-thumbnails="false"] {
		margin-bottom: 20px !important;
	}
}

Perfect -- that brought them back.

I have a couple other pages where this is true -- do I need to insert other sectionIDs for those? I'm looking to adjust on all portrait pages basically.

Thank you so much.

@GSS2 Great! Yes, you just need to add the section ID. To include a section ID, simply insert a comma after the last section ID in the code and then add the new section ID.

@GSS2 You might know about it already, but just in case, you can use this Chrome extension to discover section IDs easily: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff  

🙂 I didn't know - saved me an extra question!

Thanks!

@Lesum - thank you for the help. 
 

I noticed only one issue - in the case that the caption is on two lines, all but the first line gets clipped. Please see business and politics as a reference page. 
 

Any recommendation there?

@GSS2 There isn't enough space space for the second line to show up. We've to increase the space under the captions a little bit. You can add this code after the code you've added previously:

@media only screen and (max-width: 767px) {	
	.gallery-slideshow[data-show-captions="true"][data-thumbnails="false"] {
		margin-bottom: 35px !important;
	}
}

Thanks!