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