0

Возникла проблема с отображением на сайте (dle 11.3) картинки с мобильного, в разделе полной новости, картинка "вылазит" вправо за видимую область экрана, и появляется горизонтальная прокрутка,все остальные элементы, которые до и после картинки отображаются нормально(в одну колонку, не выходя за границы)

скриншот с полной новости

А на главной странице никаких проблем не наблюдаеться, эта же картинка отображаеться как положено

скриншот с главной страницы

Я пробовал выводить саму картинку и через img src="{image-1}" и через дополнительное поле [xfgiven_poster] результат идентичный, в styles.css смотрел, max-width 100% указан (хотя я пробовал и с ним и без него) Выкладываю кусок styles.css касающийся fullstory

/*fullstory*/
.fullstory {background:#222933; padding-top:20px; padding-bottom:40px;}
#fstory-film {background: #24303D; padding-top:20px; padding-bottom:20px;}
#related-news {background:#24303D; padding-top:20px; padding-bottom:20px;}

.fstory-h1 {
	line-height:32px; font-size:22px; overflow:hidden; text-transform:uppercase;
	border-left:8px solid #02B0E4; padding:7px 20px 7px 60px; position:relative; min-height:45px;}

.fstory-favorites {
	text-align:center; position:absolute; left:2px; top:0; width:45px; height:45px;	border:1px solid #304156;
	background:#24303D; line-height:45px; border-top-right-radius:3px; border-bottom-right-radius:3px;}
.fstory-favorites a {display:block; height:100%}
.fstory-favorites img {vertical-align:middle !important;}
.fstory-favorites:hover {background:#526480; border-color:#526480}

#addcform {background:#1D232C; padding-top:20px; padding-bottom:20px;}
#comment-news .comment-news-line {border-top:3px solid #24303D; padding-top:10px; text-align:right; margin-bottom:20px;}
@media (max-width: 767px) {
	#comment-news .btn {width:100%;}
	#comment-news .comment-news-line {margin-bottom:40px;}}

.fstory-content {text-align:justify; font-size:14px;}
.fstory-content img {max-width:100%; height:auto;}
.fstory-content ol, .fstory-content ul {margin:15px 0; padding-left:20px; overflow:hidden; color:#565A5F} 
.fstory-content ol {list-style: decimal; padding-left:30px;}
.fstory-content ul {list-style: inside;}


.fstory-poster-in {text-align:center;}
.fstory-poster {position:relative;}
.fstory-poster img {display:inline-block; vertical-align:middle; max-width:100%; border-radius:3px; border:3px solid #304156;}

@media (max-width: 767px) {.fstory-poster {margin:0 auto; width:300px;}}
.fstory-poster-rip {background:#FC1A3F; padding:4px 10px; color:#fff; position:absolute; top:20px; left:-5px}
.fstory-poster-rip a {color:#fff}

.btn-trailer {width:100%; margin-top:20px; font-size:12px; padding-top:12px; padding-bottom:12px;}
@media (max-width: 767px) {.btn-trailer {margin-bottom:20px;}}

.video-responsive embed, .video-responsive object, .video-responsive video,
.video-responsive iframe, .video-responsive frame {width: 100% !important; height:400px;}
.mejs-video, .me-plugin, .mejs-shim, .mejs-layers, .mejs-overlay {width:100% !important;}
.mejs-video, .mejs-shim {height:400px !important;}

@media screen and (max-width: 991px) {
        .video-responsive embed, .video-responsive object, .video-responsive video,
	.video-responsive iframe, .video-responsive frame, .mejs-video, .mejs-shim {height:400px !important;}		
}
@media screen and (max-width: 767px) {
         .video-responsive embed, .video-responsive object, .video-responsive video,
	.video-responsive iframe, .video-responsive frame, .mejs-video, .mejs-shim {height:350px !important;}		
}
@media screen and (max-width: 600px) {
        .video-responsive embed, .video-responsive object, .video-responsive video,
	.video-responsive iframe, .video-responsive frame, .mejs-video, .mejs-shim {height:300px !important;}		
}
@media screen and (max-width: 467px) {
        .video-responsive embed, .video-responsive object, .video-responsive video,
	.video-responsive iframe, .video-responsive frame, .mejs-video, .mejs-shim {height:250px !important;}		
}

Что думаете по этому поводу? Как исправить?

1
  • вместо max-width попробуйте width, если не помогло, значит контейнер изображения шире страницы, либо есть еще элементы на странице шире экрана
    – Skywave
    7 сен 2017 в 12:12

1 ответ 1

0

Решил проблему заменив строку

@media (max-width: 767px) {.fstory-poster {margin:0 auto; width:300px;}}

на

@media (max-width: 767px) {.fstory-poster {margin:0 auto; width:100%;}}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.