Question

Подскажите пожалуйста как сделать так чтобы блок не выходил за пределы экрана? Пример

при уменьшение экрана она одталкивается от края,а в моём случае просто выходит за пределы экрана. подскажите как исправить?

Answer 1

Приведите пример страницы сайта, где у вас такой блок имеется, после будем смотреть проблему.

Comments

<a class="thumbnail" href="#"><span><div class="nameru">${movie.nameRu}</div><div class="professionText">${movie.professionText}</div><img src="${movie.posterUrl}" alt="${movie.professionText}"/></span>${movie.nameRu}, </a>`

<style>
/*Всплывающий скриншот*/  
.thumbnail{  
position: relative;  
z-index: 0;
}  
.thumbnail:hover{  
background-color: transparent;  
z-index: 50;  
}  
.thumbnail span{ /*CSS for enlarged image*/  
  position: absolute;  
  background-color: #191a1d;  
  padding: 5px;  
  left: -1000px;   
  visibility: hidden;  
  color: #aaa;;  
  text-decoration: none;  
  border-radius: 5px;  
  -moz-border-radius: 5px;  
  -webkit-border-radius: 5px;  
  min-width: 400px;
}  
.thumbnail span img{ /*CSS for enlarged image*/  
  border-width: 0;  
  padding: 2px;
  width: 100px;
  height: 140px;
}  
.thumbnail:hover span{ /*CSS for enlarged image on hover*/  
  visibility: visible;  
  top: 0;  
  left: 60px; /*position where enlarged image should offset horizontally */
  right: 100px;
}

.nameru {  
  color: #fff;
  font-size: 20px;
  position: absolute;
  left: 115px;
  top: 0;
}

.professionText {  
  color: #aaa;
  font-size: 14px;
  position: absolute;
  left: 115px;
  top: 30px;
}
/*---------------------*/
</style>

https://kinohaus.ru/stuff/podpiska/podpiska/klaustrofoby_2_liga_vyzhivshikh/46-1-0-1383

строка в ролях

---

Александр Кошкин,

Попробуйте лишь поправить ховет для окошка:

.thumbnail:hover span { visibility: visible; top: 0; left: inherit!important; right: 100px; }

сделать как выделено красным.