[SOLVED] Problem mit mobiler Ansicht

  • Hallo,


    ich habe ein Problem mit der mobilen Ansicht einer Webseite.
    Wenn ich sie auf meinem Handy aufrufe, habe ich rechts einen weißen Streifen, wenn man von Rechts nach Links wischt.


    (getestet mit Samsung Galaxy S6) und http://www.responsinator.com/?…ps%3A%2F%2Fbtdirekt.de%2F
    bzw. http://www.responsive.cc/index


    Webseite ist: btdirekt.de


    Unter Firefox (links) & Chrome (rechts) sieht es so aus:
    http://www.fotos-hochladen.net/uploads/003z2nfocsthg.png


    Unter Galaxy S6 sieht es so aus:
    http://www.fotos-hochladen.net…eenshot2017qcd1un23ap.png


    Benutzt wird: Joomla 3.6.5 / Gantry 5 - Tpl. it_365news


    Folgende Tpl Einstellungen:


    Theme -> Page Settings -> Body Attributes -> Sections Layout = Fullwidth (Boxed Content)
    http://img5.fotos-hochladen.net/uploads/001q37t201pfh.png


    Theme -> Layout ist z. B. Drawer/ Top/ Header etc. -> Section -> Inherit from Page Settings
    http://img5.fotos-hochladen.net/uploads/004pscn7q3zf4.png


    Diese Einstellungen stehen in der custom.scss:


    @import "dependencies";
    @import "top-news-joomla";
    @import "news-pro-joomla";
    @import "header-search";
    @import "animated-counter";
    @import "video-feature";
    @import "pricing";
    @import "media-box";


    img {margin-right: 10px;margin-bottom:5px;padding-left:3px; padding-right:3px;}


    .g-news-pro-image {margin-bottom:10px;margin-right:10px!important;}


    h1 { font-size: 1.2rem;}
    h2 { font-size: 1.0rem; margin:0px; padding:0px;}
    h3 { font-size: 1.2rem;}
    h4 { padding-left:3px; padding-right:3px;}


    .g-article-header .page-header h2 a { font-size: 1.2rem;}


    .g-news-pro .g-news-pro-item .g-news-pro-image, .g-news-pro .g-news-pro-link .g-news-pro-image { max-width: 50%;}


    #g-mainbody h4 { font-size: 1.1rem; }


    #g-footer a:hover {color: #fbb725;}


    .icons ul > li {display: inline;}


    .g-social a:hover { color: gold;}


    .g-social a:first-child {border: 0; margin-left: 0;}


    .g-social a {border-right: 0px;}


    .g-news-pro .g-news-pro-item .g-news-pro-desc, .g-news-pro .g-news-pro-link .g-news-pro-desc { margin-top: 5px;}


    .g-article-header { padding-bottom: 15px;}


    .g-article-header { border-bottom: none;}


    #g-breadcrumb .g-content { margin: 0.625rem; padding: 0rem;}


    .g-date {padding-top:10px;padding-left:15px;}


    .svg {max-height:150px;}


    .neuste{min-height:375px;}


    .box1.moduletable .g-title:before, .box1.widget .g-title:before, .box1.g-outer-box .g-title:before, .box1>.g-content .g-title:before {
    background: #858585;
    }
    .box1.moduletable .g-title:after, .box1.widget .g-title:after, .box1.g-outer-box .g-title:after, .box1>.g-content .g-title:after {
    background: #858585;
    }


    .box3.moduletable, .box3.widget, .box3.g-outer-box, .box3>.g-content {
    background: #fffff0;
    color: black !important;
    }


    .box3.moduletable a, .box3.widget a, .box3.g-outer-box a, .box3>.g-content a {
    color: #eba000;
    }


    .box3.moduletable a:hover, .box3.widget a:hover, .box3.g-outer-box a:hover, .box3>.g-content a:hover {
    color: #9f6c00!important;
    }


    .box3.moduletable .g-title, .box3.widget .g-title, .box3.g-outer-box .g-title, .box3>.g-content .g-title {
    color: black !important;
    }


    Weiß jemand wie ich das fixen kann bzw. wo da der Fehler liegt :?:


    Grüße