Resize fixed modal - html

Question

I have the following fiddle
https://jsfiddle.net/7q8nejo3/1/
I'm going to explain what I have know, and what I intent to achieve.
NOW
I have a fixed position modal in the middle of the page in a min-width and min-height ... that is for mobiles devices... all works ok... if you resize the page it's all fine.
What I need
Due to the min-width and min-height, the modal keeps its size, so I need that when the screen is bigger, the tourImage also increase its size. I try to use
width: 80%; min-width:260px;
This in order to resize the picture but didn't work.
Any advice?

Answer 1

Yop,
I think you need to add a width on your fixed modal, and on your image, like this :
.tourImage{
position: relative;
width: 100%;
min-width: 260px;
min-height: 340px;
margin: 0 auto;
display: none;
background: #55acee;
}
.popover{
background:#fff;
width: 80%;
transform: translate(-50%, -50%);
position: fixed;;
top: 50% !important;
left: 50% !important;
padding: 0 20px;
}
https://jsfiddle.net/7q8nejo3/4/
You can adjust the widths as you need.

Answer 2

You could try this way. What you will get is that the width of the image won't overflow the container div.
#media screen and (max-width:800px){
.tourImage{
position: relative;
width: 80%;
min-width: 260px;
min-height: 340px;
margin: 0 auto;
background: #55acee;
}
.popover{
background:#fff;
width: 80%;
transform: translate(-50%, -50%);
position: fixed;;
top: 50% !important;
left: 50% !important;
padding: 0 20px;
}
}
#media screen and (max-width:400px){
.popover{
width: auto;
}
}