There was a problem with the display on the site (dle 11.3) of the picture from the mobile, in the full news section, the picture "climbs" to the right beyond the visible area of ​​the screen, and horizontal scrolling appears, all other elements that are displayed before and after the picture are normal (in one column, without going beyond the boundaries)
And on the main page, no problems are observed, the same picture is displayed as expected
I tried to display the picture itself and through img src = "{image-1}" and through the additional field [xfgiven_poster] the result is identical, I looked in styles.css, max-width 100% is specified (although I tried it without it) I spread a piece of styles.css concerning 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;} } What do you think about this? How to fix?
