Содержание шире, чем экран в мобильном - Как это исправить?

Question

Контент шире моего экрана в мобильном, не знаю, как решить.Это весь код мобильного сайта.

www.latoyah.co.uk - это моя веб-страница, но затронуто только мобильное.

Google вернулся и сказал, что это влияет на удобство использования.

Текст просто слегка обрезается с левой стороны.Я бы изменил размер текста, но, видимо, только он слишком мал для чтения.

/*************************************************
*   Mobile Portrait                              *
*************************************************/

@media only screen and (max-width: 480px) {

    .subscribe-box .block,.container {
        width:320px;
    }

.background-slider {
    height: 320px !important;
}
    #top-search{display:none}
#top-social {
    float: right;
    position: absolute;
    z-index: 999999999999999;
    right: 0;
}


    #navigation-wrapper {
        display:none;
    }

    .slicknav_menu {
        display:block;
    }

    #logo img {
        max-width:320px;
        height:auto;
    }

    .post-header h1 a, .post-header h2 a, .post-header h1 {
        font-size:22px;
        letter-spacing:2px;
    }

    .post-image img {
        width:320px;
        height:auto;
    }

    .post-image.audio iframe {
        width:320px;
        height:auto;
    }

    .item-related {
        width:320px;
        margin-bottom:30px;
    }

    .share-box {
        width:36px; 
        height:36px; 
        line-height:36px;
        margin:0 4px;
    }

    .post-pagination .prev-post {
        width:320px;
    }
    .post-pagination .next-post {
        width:320px;
    }

    #respond textarea {
        width:90%;
    }

    .thecomment .author-img {
        display:none;
    }

    #widget-area .widget, #sidebar .widget {
        width:320px;
        margin-right:32px;
        float:left;
        margin-bottom:35px;
    }

    #footer-logo img {
        max-width:320px;
        height:auto;
    }

    #footer-social a i {
        height:28px;
        width:28px;
        line-height:28px;
        margin-right:0;
        font-size:12px;
    }
    #footer-social a {
        margin:0 5px;
    }
    #footer-social a span{
        display:none;
    }

    .wpcf7 textarea {
        width:75%;
    }

    .sp-grid li {
        width:320px;
    }
    .sp-grid li:nth-child(3n+3) {
        margin-right:0;
    }
    .sp-grid li:nth-child(2n+2) {
        margin-right:0;
    }

    .container.sp_sidebar #main {
        width:99%;
        margin-right:0;
    }
    .container.sp_sidebar #sidebar {
        width:100%;
    }

        .container.sp_sidebar #sidebar .widget {
            width:80%;
        }

#sidebar {

    float: left;

}


    .container.sp_sidebar .item-related {
        width:212px;
        margin-bottom:30px;
    }

.my-insta-box {
    display: none;
}


#footer-social a {

   border-left: none; 

    padding-left: 0px;
    }
.subscribe-box .form,.subscribe-box .caption {width: 100%;}
.caption img {width: 100%;}

.subscribe-box .form .email {width: 200px;}


.header-top #top-social, .header-top #top-search {
    position: static;
    margin: 0 0px 0 0;
    padding: 0;
    list-style: none;
    display: inline-block;
}
article:nth-child(2n+2) {
    margin-right: 0;
}
.post {

    width: 100%;

}

.header-top #top-search {
    float: right;
}
.owl-nav {
    display: none;
}


.rst-copyright .copyright {
    position: static;
    text-align: center;
    display: block;
}

.rst-copyright .rst-social-menu {
    position: static!important;
    margin-top: 24px;
    display: block;
    text-align: center;
}

}

Answer 1

Вы просто устанавливаете максимальную ширину для всех изображений.И уменьшить ширину контейнера на основе отзывчивости.Попробуйте добавить переполнение для раздела тела следующим образом.

body {
  overflow-x: hidden;
}
img {
  max-width: 100%;
  height:auto;
}
iframe {
  max-width: 100%;
}
@media (max-width: 480px) {
.subscribe-box .block, .container {
    width: 300px;
}
}

Answer 2

добавьте этот код в ваш CSS-файл, он должен работать для вас

iframe {
    max-width: 100%;
}

.rst-copyright img {
    max-width: 100%;
    height: auto;
}

вы использовали iframe внутри iframe внутри другого iframe и егоне очень хорошая идея