Bymas | Нужна помощь с css

Проблема в том что у меня есть один блок, скрин номер 1, он с компа отображается нормально, если окно на весь экран, если окно браузера делаю меньше размером, то блок изменяется и изображение налазит на дрогое изображение, скрин номер 2. Помогите как сделать чтоб этот блок отображался одинаково вне зависимости от размера экрана браузера...

Изображение

------

74254_1.png (547.7 Kb)
Скачиваний: 98

________
посл. ред. 18.11.2020 в 13:59; всего 1 раз(а); by 482542053

Скрин 2, при изменение размера экрана блоки налазят друг на друга

Изображение

------

74255_2.png (415.0 Kb)
Скачиваний: 103

________
посл. ред. 18.11.2020 в 14:16; всего 1 раз(а); by 482542053

Ну я думаю поставить ограничение по выводу символов.

Т.е. Будет выводить Парапрара...

На первом скрине если уж честно увидел такой же песпорядр=ок что и на втором

WooW, да но проблема не в тексте который написан, а в блоке который налазит почемуто на другой блок при изменение размера экрана

Именно на моб. версию.Но Я бы так же сделал чтобы текст привязывался к номеру. А счетчик голосов вправо. Если текст голоса большой, то ограничение на вывод с базы символов, и счетчик. Конкретно на моб версии, а конкретней на разрешение экрана.

WooW, тогда текст в блоке на моб версии будет выводится не полностью а только его часть, если ограничить по символам, мне нужно чтоб в моб версии текст полность тот же самый выводился что и на комп версии

482542053 (18.11.2020 в 14:10)
WooW, да но проблема не в тексте который написан, а в блоке который налазит почемуто на другой блок при изменение размера экрана

Ну пусть автор скинет стиль данного блока. Ну и если там стоит pading то не удивлюсь

482542053 (18.11.2020 в 14:15)
WooW, тогда текст в блоке на моб версии будет выводится не полностью а только его часть, если ограничить по символам, мне нужно чтоб в моб версии текст полность тот же самый выводился что и на комп версии

Если проблема конкретна в выводе по css длинного текста, то я думаю, изменение размера текста решит проблему блока.

WooW,



 .tarif2 {

     background: -moz-linear-gradient(left, #FDA10E 0%, #FF6C0D 100;

     background: -webkit-linear-gradient(left, #FDA10E 0%, #FF6C0D 100;

     background: -o-linear-gradient(left, #FDA10E 0%, #FF6C0D 100;

     background: -ms-linear-gradient(left, #FDA10E 0%, #FF6C0D 100;

     background: linear-gradient(to right, #f50c0c 0%, #c71f1f 100;

     border-color: #fff;

 	margin:15px;

 	box-sizing: border-box;

      

     margin-top: 30px;

     border: 20px solid #fff;

     border-radius: 8px;

     margin: 0 auto;

     padding: 24px;

     text-align: center;

     -webkit-transition: margin-top 0.5s linear;

     transition: margin-top 0.5s linear;

 	color:#FFF;

 	width: 100%; 

 	 

 

 	

     

 }

 .tarif2 p {

 	color:#FFF;}

 .tarif2 span {

 	font-size:16px;

 	line-height:2;

 	font-weight:bold;

 	display:block;}

482542053 (18.11.2020 в 14:18)
WooW,



 .tarif2 {

     background: -moz-linear-gradient(left, #FDA10E 0%, #FF6C0D 100;

     background: -webkit-linear-gradient(left, #FDA10E 0%, #FF6C0D 100;

     background: -o-linear-gradient(left, #FDA10E 0%, #FF6C0D 100;

     background: -ms-linear-gradient(left, #FDA10E 0%, #FF6C0D 100;

     background: linear-gradient(to right, #f50c0c 0%, #c71f1f 100;

     border-color: #fff;

 	margin:15px;

 	box-sizing: border-box;

      

     margin-top: 30px;

     border: 20px solid #fff;

     border-radius: 8px;

     margin: 0 auto;

     padding: 24px;

     text-align: center;

     -webkit-transition: margin-top 0.5s linear;

     transition: margin-top 0.5s linear;

 	color:#FFF;

 	width: 100%; 

 	 

 

 	

     

 }

 .tarif2 p {

 	color:#FFF;}

 .tarif2 span {

 	font-size:16px;

 	line-height:2;

 	font-weight:bold;

 	display:block;}

Скинь в лс линк на ориинл