Large images displays incorrect size

chadlly2003:

balihris I was just doing what he asked for. But i dont disagree with you.
I know you meant well and wanted to help, but with you being a template author, you need to think about multiple possibilities and scenarios and different devices to achieve a truly responsive layout, and not just drop the first solution because it works in one case (your screen).
What I've learnt over years is that most people ask for one thing, but actually want another and then, with a lot of discussion, we end up doing something completely different because the original idea wasn't the best. Also, sometimes just giving the solution without questioning isn't good at all: imagine if your friend came asking for a good quality suicide rope - would you just point them to the best rope in the store because they asked for it or would you discuss it and try to find a better solution?

So here the solution to
keep the product images and secondary image displayed in the viewport

includes/templates/usc_bs4/css/stylesheet.css
put at the very bottom

.modal-body .container {
max-width:600px
}

> 
> 
> 

Close, but still... Look at the empty space in the bottom which could've been used to display a larger image... You're probably on a slightly smaller screen than me so it looks good, but you haven't considered different scenarios and different devices. 
Also, what happens if an image is vertical and not square?

And just FYI, the gazillion scenarios is the primary reason why I'm reluctant to publish any templates... :wink:

balihr:

I know you meant well and wanted to help, but with you being a template author, you need to think about multiple possibilities and scenarios and different devices to achieve a truly responsive layout, and not just drop the first solution because it works in one case (your screen).
What I've learnt over years is that most people ask for one thing, but actually want another and then, with a lot of discussion, we end up doing something completely different because the original idea wasn't the best. Also, sometimes just giving the solution without questioning isn't good at all: imagine if your friend came asking for a good quality suicide rope - would you just point them to the best rope in the store because they asked for it or would you discuss it and try to find a better solution?

Close, but still... Look at the empty space in the bottom which could've been used to display a larger image... You're probably on a slightly smaller screen than me so it looks good, but you haven't considered different scenarios and different devices.
Also, what happens if an image is vertical and not square?

And just FYI, the gazillion scenarios is the primary reason why I'm reluctant to publish any templates... :wink:

Just FYI not the author of this template....

But I think I have a solution try adding this. It will work on all browser and be responsive.

put at the bottom of
includes/templates/usc_bs4/css/stylesheet.css

 
.modal-body .container {
    max-width:600px;
}

.modal-dialog {
    height: 100vh;
    margin: 0;
    max-width: 100%;
    margin:auto;
    
}

.modal-content {
    height: 100%;
    border-radius: 0;
}

disregard that ill give you something else to try give me a few

balihr:

I know you meant well and wanted to help, but with you being a template author, you need to think about multiple possibilities and scenarios and different devices to achieve a truly responsive layout, and not just drop the first solution because it works in one case (your screen).
What I've learnt over years is that most people ask for one thing, but actually want another and then, with a lot of discussion, we end up doing something completely different because the original idea wasn't the best. Also, sometimes just giving the solution without questioning isn't good at all: imagine if your friend came asking for a good quality suicide rope - would you just point them to the best rope in the store because they asked for it or would you discuss it and try to find a better solution?

Close, but still... Look at the empty space in the bottom which could've been used to display a larger image... You're probably on a slightly smaller screen than me so it looks good, but you haven't considered different scenarios and different devices.
Also, what happens if an image is vertical and not square?

And just FYI, the gazillion scenarios is the primary reason why I'm reluctant to publish any templates... :wink:

I think i am getting closer lets see how this works. The main images pushes everything down which makes it a little bit of a headache.

The next step would be just to move the secondary images to the left side. But try this first.

includes/templates/usc_bs4/css/stylesheet.css
put at the very bottom

.modal-body .container{
justify-content: center;
    display: flex;
}

.modal-dialog.modal-lg {
    max-width: 95vw;       
    margin: 1.5rem auto;   
}

#productImagesCarousel .carousel-inner .carousel-item img {
    max-width: 100%;            
    max-height: 60vh;           
    object-fit: contain;        
    margin: 0 auto;             
    display: block;
}

/* Ensure thumbnails are always visible */
#productImagesCarousel .carousel-indicators {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;           
    justify-content: flex-start;
    padding: 10px 0;
}

/* Thumbnail sizing */
#productImagesCarousel .carousel-indicators li img {
    width: 90px;
    height: 80px;
    object-fit: contain;
    margin-right: 5px;
}

#productImagesCarousel .carousel-indicators::-webkit-scrollbar {
    height: 6px;
}

#productImagesCarousel .carousel-indicators::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

#productImagesCarousel .carousel-indicators::-webkit-scrollbar-track {
    background: #f1f1f1;
}

chadlly2003:

I think i am getting closer lets see how this works. The main images pushes everything down which makes it a little bit of a headache.

The next step would be just to move the secondary images to the left side. But try this first.

includes/templates/usc_bs4/css/stylesheet.css
put at the very bottom

.modal-body .container{
justify-content: center;
display: flex;
}

.modal-dialog.modal-lg {
max-width: 95vw;
margin: 1.5rem auto;
}

#productImagesCarousel .carousel-inner .carousel-item img {
max-width: 100%;
max-height: 60vh;
object-fit: contain;
margin: 0 auto;
display: block;
}

/* Ensure thumbnails are always visible */
#productImagesCarousel .carousel-indicators {
display: flex !important;
flex-wrap: nowrap;
overflow-x: auto;
justify-content: flex-start;
padding: 10px 0;
}

/* Thumbnail sizing */
#productImagesCarousel .carousel-indicators li img {
width: 90px;
height: 80px;
object-fit: contain;
margin-right: 5px;
}

#productImagesCarousel .carousel-indicators::-webkit-scrollbar {
height: 6px;
}

#productImagesCarousel .carousel-indicators::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}

#productImagesCarousel .carousel-indicators::-webkit-scrollbar-track {
background: #f1f1f1;
}

if you want to make it full with you can do this 

remove this 

.modal-lg, .modal-xl {
max-width: 100%;
margin-left:1rem;
margin-right:1rem;
}
@media (min-width: 992px) {
.modal-lg, .modal-xl {
width: 50%;
margin:auto;
}
}

replace with

.modal-lg, .modal-xl {
max-width: 100%;
margin-left:1rem;
margin-right:1rem;
}

.modal-body .container{
justify-content: center;
display: flex;
}

.modal-dialog.modal-lg {
max-width: 95vw;
margin: 1.5rem auto;
}

#productImagesCarousel .carousel-inner .carousel-item img {
max-width: 100%;
max-height: 60vh;
object-fit: contain;
margin: 0 auto;
display: block;
}

/* Ensure thumbnails are always visible */
#productImagesCarousel .carousel-indicators {
display: flex !important;
flex-wrap: nowrap;
overflow-x: auto;
justify-content: flex-start;
padding: 10px 0;
}

/* Thumbnail sizing */
#productImagesCarousel .carousel-indicators li img {
width: 90px;
height: 80px;
object-fit: contain;
margin-right: 5px;
}

#productImagesCarousel .carousel-indicators::-webkit-scrollbar {
height: 6px;
}

#productImagesCarousel .carousel-indicators::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}

#productImagesCarousel .carousel-indicators::-webkit-scrollbar-track {
background: #f1f1f1;
}

chadlly2003:

Just FYI not the author of this template....
I know, I referred to you as A template author. Although I'm not using it because I prefer Bootstrap (not this one tho), what you've done on RC redesign is impressive, and this is why I'm (personally) expecting more from you.

chadlly2003:

I think i am getting closer lets see how this works. The main images pushes everything down which makes it a little bit of a headache.
You're getting closer, but still not good enough. You're solving one problem, but missing another. Resize the window, please. See how your solution works on a 1440x800px viewport. I know it's a stupid size, but that's the whole idea of responsive design - some people simply don't maximize the browser window so you have to expect ANY screen size to be used. You get a vertical scrollbar because the modal window is cut off with your current solution.

I do admire your determination to find a solution, but I must admit I'm not sure why you're still pushing for it when there's a solution available in the post I made here and it's fully responsive plus fixes a template bug...
But, if you're up for the challenge, keep going - I sincerely hope you provide a better and more efficient solution than mine. Just please make sure you play with window resizing and make sure you have a fully responsive solution before posting it here. :wink:

balihr:

I know, I referred to you as A template author. Although I'm not using it because I prefer Bootstrap (not this one tho), what you've done on RC redesign is impressive, and this is why I'm (personally) expecting more from you.

You're getting closer, but still not good enough. You're solving one problem, but missing another. Resize the window, please. See how your solution works on a 1440x800px viewport. I know it's a stupid size, but that's the whole idea of responsive design - some people simply don't maximize the browser window so you have to expect ANY screen size to be used. You get a vertical scrollbar because the modal window is cut off with your current solution.

I do admire your determination to find a solution, but I must admit I'm not sure why you're still pushing for it when there's a solution available in the post I made here and it's fully responsive plus fixes a template bug...
But, if you're up for the challenge, keep going - I sincerely hope you provide a better and more efficient solution than mine. Just please make sure you play with window resizing and make sure you have a fully responsive solution before posting it here. :wink:

lets try this. let me know if any other adjustments are needed.

remove this from includes/templates/usc_bs4/css/stylesheet.css

.modal-lg, .modal-xl {
        max-width: 100%;
        margin-left:1rem; 
        margin-right:1rem;
    }
@media (min-width: 992px) {
    .modal-lg, .modal-xl {
         width: 50%;
         margin:auto;
     }
}

add

/* ================================MODAL HEIGHT CONTROL================================ */
.bootstrap-slide-modal-lg .modal-dialog {
	max-height: 90vh;
}
.bootstrap-slide-modal-lg .modal-content {
	height: 90vh;
}
.bootstrap-slide-modal-lg .modal-body {
	height: calc(90vh - 120px);
	overflow: hidden;
}
/* ================================CAROUSEL BASE LAYOUT================================ */
#productImagesCarousel {
	display: flex;
	height: 100%;
	position: relative;
}
/* ================================MAIN IMAGE TRACK (DO NOT FLEX)================================ */
#productImagesCarousel .carousel-inner {
	order: 2;
	width: calc(100% - 90px);
	height: 100%;
}
/* ================================SLIDES — CENTER IMAGE SAFELY================================ */
#productImagesCarousel .carousel-item {
	height: 100%;
	text-align: center;
}
#productImagesCarousel .carousel-item img {
	max-width: 100%;
	max-height: 80%;
	object-fit: contain;
	display: block;
	margin: auto;
	cursor: pointer;
	/* click works */
	margin-bottom:-42px;
}
/* ================================FLOATING CONTROLS (SAFE)================================ */
#carousel-btn-toolbar {
	position: absolute;
	bottom: 16px;
	left: 0;
	right: 0;
	z-index: 10;
	pointer-events: none;
	top:0;
}
#carousel-btn-toolbar a {
	pointer-events: auto;
}
/* ================================THUMBNAILS COLUMN================================ */
#productImagesCarousel .carousel-indicators {
	order: 1;
	position: static !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-right:22px;
	width: 80px;
	overflow-y: auto;
	margin: 0 !important;
	padding: 0 !important;
}
#productImagesCarousel .carousel-indicators li {
	margin: 4px 0;
}
#productImagesCarousel .carousel-indicators img {
	width: 60px;
	opacity: 0.6;
}
#productImagesCarousel .carousel-indicators .active img {
	opacity: 1;
	border: 2px solid #007bff;
}
/* ================================MOBILE RESET================================ */
@media (max-width: 991px) {
	.bootstrap-slide-modal-lg .modal-content,.bootstrap-slide-modal-lg .modal-body {
		height: auto;
		overflow: visible;
	}
	#productImagesCarousel {
		flex-direction: column;
	}
	#productImagesCarousel .carousel-inner {
		width: 100%;
		order: 1;
	}
	flex=-st#productImagesCarousel .carousel-item img {
		max-height: 60vh;
	}
	#productImagesCarousel .carousel-indicators {
		flex-direction: row;
		width: 100%;
		order: 2;
		overflow-x: auto;
		overflow-y: hidden;
		padding-top: 8px !important;
	}
	#productImagesCarousel .carousel-indicators li {
		margin: 0 4px;
	}
}
@media (min-width: 992px) {
	#productImagesCarousel .carousel-indicators {
		height:540px;
	}
	#productImagesCarousel .carousel-indicators {
		padding-right:22px !important;
	}
	#carousel-btn-toolbar a {
		margin-top:-165px;
	}
}

this is the mobile view

this is desktop

balihr,

Sorry for all the post.

try this and let me know.
I documented the css so you can get idea of what i adjusted i made to make this happen.

remove this

.modal-lg, .modal-xl {
        max-width: 100%;
        margin-left:1rem; 
        margin-right:1rem;
    }
@media (min-width: 992px) {
    .modal-lg, .modal-xl {
         width: 50%;
         margin:auto;
     }
}

replace with this

/* ================================MODAL HEIGHT CONTROL================================ */
.bootstrap-slide-modal-lg .modal-dialog {
	max-height: 90vh;
}
.bootstrap-slide-modal-lg .modal-content {
	height: 90vh;
}
.bootstrap-slide-modal-lg .modal-body {
	height: calc(90vh - 120px);
	overflow: hidden;
}
/* ================================CAROUSEL BASE LAYOUT================================ */
#productImagesCarousel {
	display: flex;
	height: 100%;
	position: relative;
}
/* ================================MAIN IMAGE TRACK (DO NOT FLEX)================================ */
#productImagesCarousel .carousel-inner {
	order: 2;
	width: calc(100% - 90px);
	height: 100%;
}
/* ================================SLIDES — CENTER IMAGE SAFELY================================ */
#productImagesCarousel .carousel-item {
	height: 100%;
	text-align: center;
}
#productImagesCarousel .carousel-item img {
	max-width: 100%;
	object-fit: contain;
	display: block;
	margin: auto;
	cursor: pointer;
	height:100%;
}
/* ================================FLOATING CONTROLS (SAFE)================================ */
#carousel-btn-toolbar {
	position: absolute;
	bottom: 16px;
	left: 0;
	right: 0;
	z-index: 10;
	pointer-events: none;
	top:0;
}
#carousel-btn-toolbar a {
	pointer-events: auto;
}
/* ================================THUMBNAILS COLUMN================================ */
#productImagesCarousel .carousel-indicators {
	order: 1;
	position: static !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-right:22px;
	width: 80px;
	overflow-y: auto;
	margin: 0 !important;
	padding: 0 !important;
}
#productImagesCarousel .carousel-indicators li {
	margin: 4px 0;
}
#productImagesCarousel .carousel-indicators img {
	width: 60px;
	opacity: 0.6;
}
#productImagesCarousel .carousel-indicators .active img {
	opacity: 1;
	border: 2px solid #007bff;
}
/* ================================MOBILE RESET================================ */
@media (max-width: 991px) {
	.bootstrap-slide-modal-lg .modal-content,.bootstrap-slide-modal-lg .modal-body {
		height: auto;
		overflow: visible;
	}
	#productImagesCarousel {
		flex-direction: column;
	}
	#productImagesCarousel .carousel-inner {
		width: 100%;
		order: 1;
	}
	flex=-st#productImagesCarousel .carousel-item img {
		max-height: 60vh;
	}
	#productImagesCarousel .carousel-indicators {
		flex-direction: row;
		width: 100%;
		order: 2;
		overflow-x: auto;
		overflow-y: hidden;
		padding-top: 8px !important;
	}
	#productImagesCarousel .carousel-indicators li {
		margin: 0 4px;
	}
}
@media (min-width: 992px) {
	#productImagesCarousel .carousel-indicators {
		height:540px;
	}
	#productImagesCarousel .carousel-indicators {
		padding-right:22px !important;
	}
}
/* ================= FORCE HEIGHT CHAIN ================= */
.modal,.modal-dialog,.modal-content,.modal-body,.modal-body .container,.modal-body .row,#slider,#productImagesCarousel {
	height: 100%;
}
/* ================= SCROLLABLE LEFT INDICATORS ================= */
#productImagesCarousel {
	display: flex;
}
@media (min-width: 992px) {
	/* the UL you cannot edit */
	#productImagesCarousel .carousel-indicators {
		/* kill Bootstrap defaults */
		position: static !important;
		margin: 0 !important;
		padding: 0 !important;
		/* cancel utility classes */
		margin-left: 0 !important;
		margin-right: 0 !important;
		/* left column */
		flex: 0 0 80px;
		width: 80px;
		/* THIS enables scroll */
		height: 100%;
		max-height: 100%;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		/* layout */
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
	}
	/* kill list-inline behavior */
	#productImagesCarousel .carousel-indicators.list-inline {
		white-space: normal !important;
	}
	/* vertical thumbnails */
	#productImagesCarousel .carousel-indicators .list-inline-item {
		display: block !important;
		margin: 6px 0 !important;
	}
	/* main image fills remaining space */
	#productImagesCarousel .carousel-inner {
		flex: 1 1 auto;
		width: auto !important;
	}
}

chadlly2003:

balihr,

Sorry for all the post.

try this and let me know.
I documented the css so you can get idea of what i adjusted i made to make this happen.

remove this

.modal-lg, .modal-xl {
max-width: 100%;
margin-left:1rem;
margin-right:1rem;
}
@media (min-width: 992px) {
.modal-lg, .modal-xl {
width: 50%;
margin:auto;
}
}

> 
> replace with this 
> 
> ```
/* ================================MODAL HEIGHT CONTROL================================ */
.bootstrap-slide-modal-lg .modal-dialog {
	max-height: 90vh;
}
.bootstrap-slide-modal-lg .modal-content {
	height: 90vh;
}
.bootstrap-slide-modal-lg .modal-body {
	height: calc(90vh - 120px);
	overflow: hidden;
}
/* ================================CAROUSEL BASE LAYOUT================================ */
#productImagesCarousel {
	display: flex;
	height: 100%;
	position: relative;
}
/* ================================MAIN IMAGE TRACK (DO NOT FLEX)================================ */
#productImagesCarousel .carousel-inner {
	order: 2;
	width: calc(100% - 90px);
	height: 100%;
}
/* ================================SLIDES — CENTER IMAGE SAFELY================================ */
#productImagesCarousel .carousel-item {
	height: 100%;
	text-align: center;
}
#productImagesCarousel .carousel-item img {
	max-width: 100%;
	object-fit: contain;
	display: block;
	margin: auto;
	cursor: pointer;
	height:100%;
}
/* ================================FLOATING CONTROLS (SAFE)================================ */
#carousel-btn-toolbar {
	position: absolute;
	bottom: 16px;
	left: 0;
	right: 0;
	z-index: 10;
	pointer-events: none;
	top:0;
}
#carousel-btn-toolbar a {
	pointer-events: auto;
}
/* ================================THUMBNAILS COLUMN================================ */
#productImagesCarousel .carousel-indicators {
	order: 1;
	position: static !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-right:22px;
	width: 80px;
	overflow-y: auto;
	margin: 0 !important;
	padding: 0 !important;
}
#productImagesCarousel .carousel-indicators li {
	margin: 4px 0;
}
#productImagesCarousel .carousel-indicators img {
	width: 60px;
	opacity: 0.6;
}
#productImagesCarousel .carousel-indicators .active img {
	opacity: 1;
	border: 2px solid #007bff;
}
/* ================================MOBILE RESET================================ */
@media (max-width: 991px) {
	.bootstrap-slide-modal-lg .modal-content,.bootstrap-slide-modal-lg .modal-body {
		height: auto;
		overflow: visible;
	}
	#productImagesCarousel {
		flex-direction: column;
	}
	#productImagesCarousel .carousel-inner {
		width: 100%;
		order: 1;
	}
	flex=-st#productImagesCarousel .carousel-item img {
		max-height: 60vh;
	}
	#productImagesCarousel .carousel-indicators {
		flex-direction: row;
		width: 100%;
		order: 2;
		overflow-x: auto;
		overflow-y: hidden;
		padding-top: 8px !important;
	}
	#productImagesCarousel .carousel-indicators li {
		margin: 0 4px;
	}
}
@media (min-width: 992px) {
	#productImagesCarousel .carousel-indicators {
		height:540px;
	}
	#productImagesCarousel .carousel-indicators {
		padding-right:22px !important;
	}
}
/* ================= FORCE HEIGHT CHAIN ================= */
.modal,.modal-dialog,.modal-content,.modal-body,.modal-body .container,.modal-body .row,#slider,#productImagesCarousel {
	height: 100%;
}
/* ================= SCROLLABLE LEFT INDICATORS ================= */
#productImagesCarousel {
	display: flex;
}
@media (min-width: 992px) {
	/* the UL you cannot edit */
	#productImagesCarousel .carousel-indicators {
		/* kill Bootstrap defaults */
		position: static !important;
		margin: 0 !important;
		padding: 0 !important;
		/* cancel utility classes */
		margin-left: 0 !important;
		margin-right: 0 !important;
		/* left column */
		flex: 0 0 80px;
		width: 80px;
		/* THIS enables scroll */
		height: 100%;
		max-height: 100%;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		/* layout */
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
	}
	/* kill list-inline behavior */
	#productImagesCarousel .carousel-indicators.list-inline {
		white-space: normal !important;
	}
	/* vertical thumbnails */
	#productImagesCarousel .carousel-indicators .list-inline-item {
		display: block !important;
		margin: 6px 0 !important;
	}
	/* main image fills remaining space */
	#productImagesCarousel .carousel-inner {
		flex: 1 1 auto;
		width: auto !important;
	}
}

just an fyi if you want to resize your mobile images you can resize easily by
using

@media (max-width: 991px) {
  .modal-dialog {max-width:600px;} 

}

Finally has time to ######## down for an hour and take a real good look at it. i think i got it all should work on all screen sizes etc... Should have no more issues.

remove this

.modal-lg, .modal-xl {
        max-width: 100%;
        margin-left:1rem; 
        margin-right:1rem;
    }
@media (min-width: 992px) {
    .modal-lg, .modal-xl {
         width: 50%;
         margin:auto;
     }
}

replace with

/* ================================MODAL HEIGHT CONTROL================================ */
.bootstrap-slide-modal-lg .modal-dialog {
	/*! max-height: 90vh;
	*/
	height: ;
	margin: 0px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.bootstrap-slide-modal-lg .modal-content {
	height: 100% !important;
}
.bootstrap-slide-modal-lg .modal-body {
	height: calc(90vh - 120px);
	overflow: hidden;
}
/* ================================CAROUSEL BASE LAYOUT================================ */
#productImagesCarousel {
	display: flex;
	height: 100%;
	position: relative;
}
/* ================================MAIN IMAGE TRACK (DO NOT FLEX)================================ */
#productImagesCarousel .carousel-inner {
	order: 2;
	width: calc(100% - 90px);
	height: 100%;
}
/* ================================SLIDES — CENTER IMAGE SAFELY================================ */
#productImagesCarousel .carousel-item {
	height: 100%;
	text-align: center;
}
#productImagesCarousel .carousel-item img {
	max-width: 100%;
	object-fit: contain;
	display: block;
	margin: auto;
	cursor: pointer;
	height:100%;
}
/* ================================FLOATING CONTROLS (SAFE)================================ */
#carousel-btn-toolbar {
	position: absolute;
	bottom: 16px;
	left: 0;
	right: 0;
	z-index: 10;
	pointer-events: none;
	top:0;
}
#carousel-btn-toolbar a {
	pointer-events: auto;
}
/* ================================THUMBNAILS COLUMN================================ */
#productImagesCarousel .carousel-indicators {
	order: 1;
	position: static !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-right:22px;
	width: 80px;
	overflow-y: auto;
	margin: 0 !important;
	padding: 0 !important;
}
#productImagesCarousel .carousel-indicators li {
	margin: 4px 0;
}
#productImagesCarousel .carousel-indicators img {
	width: 60px;
	opacity: 0.6;
}
#productImagesCarousel .carousel-indicators .active img {
	opacity: 1;
	border: 2px solid #007bff;
}
/* ================================MOBILE RESET================================ */
@media (max-width: 991px) {
	.bootstrap-slide-modal-lg .modal-content,.bootstrap-slide-modal-lg .modal-body {
		height: 100%;
		overflow: hidden;
	}
	#productImagesCarousel {
		flex-direction: column;
	}
	#productImagesCarousel .carousel-inner {
		width: 100%;
		order: 1;
	}
	flex=-st#productImagesCarousel .carousel-item img {
		max-height: 60vh;
	}
	#productImagesCarousel .carousel-indicators {
		flex-direction: row;
		width: 100%;
		order: 2;
		overflow-x: auto;
		overflow-y: hidden;
		padding-top: 8px !important;
	}
	#productImagesCarousel .carousel-indicators li {
		margin: 0 4px;
	}
}
@media (min-width: 992px) {
	#productImagesCarousel .carousel-indicators {
		height:540px;
	}
	#productImagesCarousel .carousel-indicators {
		padding-right:22px !important;
	}
}
/* ================= FORCE HEIGHT CHAIN ================= */
.modal,.modal-dialog,.modal-content,.modal-body,.modal-body .container,.modal-body .row,#slider,#productImagesCarousel {
	height: 100%;
}
/* ================= SCROLLABLE LEFT INDICATORS ================= */
#productImagesCarousel {
	display: flex;
}
@media (min-width: 992px) {
	/* the UL you cannot edit */
	#productImagesCarousel .carousel-indicators {
		/* kill Bootstrap defaults */
		position: static !important;
		margin: 0 !important;
		padding: 0 !important;
		/* cancel utility classes */
		margin-left: 0 !important;
		margin-right: 0 !important;
		/* left column */
		flex: 0 0 80px;
		width: 80px;
		/* THIS enables scroll */
		height: 100%;
		max-height: 100%;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		/* layout */
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
	}
	/* kill list-inline behavior */
	#productImagesCarousel .carousel-indicators.list-inline {
		white-space: normal !important;
	}
	/* vertical thumbnails */
	#productImagesCarousel .carousel-indicators .list-inline-item {
		display: block !important;
		margin: 6px 0 !important;
	}
	/* main image fills remaining space */
	#productImagesCarousel .carousel-inner {
		flex: 1 1 auto;
		width: auto !important;
	}
}
.modal-dialog {
	max-width: ;
	margin: 1.75rem auto;
}
@media (min-width: 576px) {
	.modal-dialog {
		max-width: 500px;
		margin: 1.75rem auto;
	}
}
@media (min-width: 768px) {
	.modal-dialog {
		max-width: 600px;
		margin: 1.75rem auto;
	}
}
@media (min-width: 992px) {
	.modal-dialog {
		max-width: 800px;
		margin: 1.75rem auto;
	}
}
.modal-open .modal {
	padding-right:0px !important;
}

Wow, I'm not a programmer so to me this very impressive. Thank you both for giving this so much attention. I have implemented this and to me it seems like it's working perfectly on both large and small screens. The additional images on the left side is great and the size of the large images fits fine.
You should make this into an official plugin, there must be others who can use this.