Responsive Css, um Element an Container zu kleben (mit Höhenvariation des Containers)

Question

Ich habe einen kleinen Albtraum mit dieser doppelseitigen CSS Diashow können Sie hier sehen: https://codepen.io/byte37/pen/GymRjb.
Es funktioniert ok im pc/Landscape-Modus, aber in responsive funktioniert es nicht so, wie ich es gerne würde. Ich versuche, die Buttons und den darunter liegenden Text in der gleichen Position zu halten, 10% rechts/links von der anderen Diashow und in der Mitte davon; und der Container (Diashows), um die Höhe zu ändern, wenn die Größe des Bildschirms geändert wird. Ich habe es mit @media max-width css versucht, aber nicht gut funktioniert.
Ich bin in einer ziemlich einfachen Sache fest und ich würde glücklich sein, etwas Hilfe von wer weiß besser über das Thema zu erhalten.

Code:

<div class="main-slider"> 
     <div class="row"> 
     <a href="/it/xxx"> 
      <div class="fade-art"> 
       <img src="https://static.pexels.com/photos/14621/Warsaw-at-night-free-license-CC0.jpg"> 
       <img src="http://www.bigfoto.com/stones-background.jpg"> 
       <img src="http://sites.psu.edu/mab6390mis387/wp-content/uploads/sites/39460/2016/02/mountain.jpg"> 
       <div class="titolo-art"> 
        <div><span class="font-w-100 white-text btn-cbi-soft-blu btn btn-md">Left</span></div> 
        <br> 
        <p class="font-w-100 white-text p-slider-rx">Bla bla bla bla bla</p> 
       </div> 
      </div> 
     </a> 
     <a href="/it/yyy"> 
      <div class="fade-outlet"> 
       <img src="http://www.freedigitalphotos.net/images/img/homepage/golf-1-top-82328.jpg"> 
       <img src="http://globalmedicalco.com/photos/globalmedicalco/9/42934.jpg"> 
       <img src="https://static.pexels.com/photos/88212/pexels-photo-88212.jpeg"> 
       <div class="titolo-outlet"> 
        <span class="font-w-100 white-text btn-cbi-soft-blu btn btn-md">Right</span> 
        <br> 
        <p class="font-w-100 white-text">Bla bla bla bla bla</p> 
       </div> 
      </div> 
     </a> 
     </div> 
</div> 

Css:

.main-slider { 
    width: 100%; 
    overflow: hidden; 
    margin-top: -30px; 
} 
.titolo-art { 
    position: absolute; 
    top: 50%; 
    left: 80%; 
} 
.titolo-outlet { 
    position: absolute; 
    top: 50%; 
    right: 80%; 
} 
.p-slider-rx { 
    left: -107%; 
    position: absolute; 
} 

@keyframes fade { 
    0% { opacity: 0; } 
    11.11% { opacity: 1; } 
    33.33% { opacity: 1; } 
    44.44% { opacity: 0; } 
    100% { opacity: 0; } 
} 
/* ** */ 
.fade-outlet { position:relative; float:right; height:400px; width:50%; background-color: #009de3; overflow: hidden;} 
.fade-outlet img { position:absolute; left:0; right:0; opacity:0; /*width:100%;*/ animation-name: fade; animation-duration: 18s; animation-iteration-count: infinite;} 
/* ** */ 
.fade-art img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 12s; animation-iteration-count: infinite; /*width:100%;*/ /*margin-top: -15%;*/} 
.fade-art { position:relative; float:left; height:400px; width:50%; background-color:#c3b091; overflow: hidden;} 
/* ** */ 
.fade-art img:nth-child(1) {animation-delay: 2s;} 
.fade-art img:nth-child(2) {animation-delay: 12s;} 
.fade-art img:nth-child(3) {animation-delay: 24s;} 
/* ** */ 
.fade-outlet img:nth-child(1) {animation-delay: 6s;} 
.fade-outlet img:nth-child(2) {animation-delay: 18s;} 
.fade-outlet img:nth-child(3) {animation-delay: 30s;} 

.btn-cbi-soft-blu { 
    background-color: transparent; 
    border: 1px solid #fff; 
    padding:15px; 
    color: #fff; 
} 

Dank! :)

Answer 1

Wenn ich Ihre Frage richtig verstanden habe, möchten Sie nur, dass die Taste in einem festen Abstand von der Mitte ist. Sie können versuchen, dies zu ändern.

.titolo-art { 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 50px; 
 
} 
 

 
.titolo-outlet { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50px; 
 
}