Возникла проблема с отображением на сайте (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;}
}
Что думаете по этому поводу? Как исправить?