css-Problem mit Scroller am Handy
css-Problem mit Scroller am Handy
Ich habe da ein kleines Problem mit Chrome am Handy.
Der Effekt ist erst seit Kurzem.
In Chrome am Android-Handy habe ich einen kleinen Querscroller, im Firefox nicht.
https://www.afripix-web.de/webdesigner-gummersbach.php
Es liegt eindeutig an den Blöcken, wo Bild und Text mal links und mal rechts stehen (inkl des gelben Blocks)
Nun kann ich die Dinger komplett neu bauen oder auch aus anderen Themes was brauchbares suchen, aber ich habe etwa 30 Stk von diesen Landingpages, also 120 Blöcke.
Es wäre mir also ganz recht, wenn wir den CSS-Fehler finden könnten. Das geht dann mit Suchen-Ersetzen im Projektfile.
Das es nur am Handy falsch ist, suche ich mir also gerade einen Wolf....Debug ist ist da nicht sonderlich gut.
Frank
Der Effekt ist erst seit Kurzem.
In Chrome am Android-Handy habe ich einen kleinen Querscroller, im Firefox nicht.
https://www.afripix-web.de/webdesigner-gummersbach.php
Es liegt eindeutig an den Blöcken, wo Bild und Text mal links und mal rechts stehen (inkl des gelben Blocks)
Nun kann ich die Dinger komplett neu bauen oder auch aus anderen Themes was brauchbares suchen, aber ich habe etwa 30 Stk von diesen Landingpages, also 120 Blöcke.
Es wäre mir also ganz recht, wenn wir den CSS-Fehler finden könnten. Das geht dann mit Suchen-Ersetzen im Projektfile.
Das es nur am Handy falsch ist, suche ich mir also gerade einen Wolf....Debug ist ist da nicht sonderlich gut.
Frank
- Tommy Herrmann
- Site Admin
- Beiträge: 5865
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: css-Problem mit Scroller am Handy
Moin,
also ich bin mir fast sicher, dass das nur mit der "Navik" Menüleiste zu tun hat und zwar mit diesem Eintrag:
... denn, man kann das ja auch ganz eindeutig erkennen. Da steht nichts über, außer eben dieser Hamburger-Button und der verursacht das Overflow. Vielleicht noch mit einer anderen Class - das kann ich gerade nicht genau sehen, denn da gibt es mehrere Abstände für diesen Hamburger in der CSS.
Teste mal und mache das weg - vergiss nicht zwingend den Cache vom Android-Browser zu leeren.
Diese 30px lassen am Android-Browser das Overflow entstehen. Bei mir nur am "Android" Browser und weder am Chrome, Edge oder Firefox.
Am Screenshot habe ich mal beide Browser direkt nebeneinander gestellt.
Links Chrome-Browser und rechts Android-Browser, da kann man doch eindeutig erkennen, dass es am Hamburger liegt, denn genau um den Versatz entsteht auch der Überlauf (Querscroller):
also ich bin mir fast sicher, dass das nur mit der "Navik" Menüleiste zu tun hat und zwar mit diesem Eintrag:
Code: Alles auswählen
@media (min-width: 768px) {
.navik-header-overlay .burger-menu {
right: 30px;
}
}
... denn, man kann das ja auch ganz eindeutig erkennen. Da steht nichts über, außer eben dieser Hamburger-Button und der verursacht das Overflow. Vielleicht noch mit einer anderen Class - das kann ich gerade nicht genau sehen, denn da gibt es mehrere Abstände für diesen Hamburger in der CSS.
Teste mal und mache das weg - vergiss nicht zwingend den Cache vom Android-Browser zu leeren.
Diese 30px lassen am Android-Browser das Overflow entstehen. Bei mir nur am "Android" Browser und weder am Chrome, Edge oder Firefox.
Am Screenshot habe ich mal beide Browser direkt nebeneinander gestellt.
Links Chrome-Browser und rechts Android-Browser, da kann man doch eindeutig erkennen, dass es am Hamburger liegt, denn genau um den Versatz entsteht auch der Überlauf (Querscroller):
Re: css-Problem mit Scroller am Handy
Du bist heute zu früh für mich ....
Sekunde! Ich mache direkt im Quellcode.
Navik weg, scroller noch da.
Ich hatte ja geschrieben, dass es an den mittleren Blocken liegt. Wenn die raus sind, ist gut.
Sekunde! Ich mache direkt im Quellcode.
Navik weg, scroller noch da.
Ich hatte ja geschrieben, dass es an den mittleren Blocken liegt. Wenn die raus sind, ist gut.
- Tommy Herrmann
- Site Admin
- Beiträge: 5865
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: css-Problem mit Scroller am Handy
wie willst Du das denn für das Handy machen - das geht nicht im Quellcode vom Browser- Werkzeug
Re: css-Problem mit Scroller am Handy
Im Quellcode mit FTP
- Tommy Herrmann
- Site Admin
- Beiträge: 5865
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: css-Problem mit Scroller am Handy
... aber dann müsstest Du schon die gesamte CSS-Datei von Navik deaktivieren.
Da ist auch noch so viel anderes was es sein könnte - was hast Du da bloß alles drinnen![eek :eek:](./images/smilies/eek.gif)
Was ist dennn das z.B. für ein CSS-Monster
https://www.afripix-web.de/WOW-master/c ... nimate.css
Da ist auch noch so viel anderes was es sein könnte - was hast Du da bloß alles drinnen
![eek :eek:](./images/smilies/eek.gif)
Was ist dennn das z.B. für ein CSS-Monster
![Angst :angst:](./images/smilies/scared.gif)
https://www.afripix-web.de/WOW-master/c ... nimate.css
Re: css-Problem mit Scroller am Handy
Alles von Navik ist gerade raus.
Ich hole mir die Navi ja über PHP-Include.
Ich mache mal eben eine Testseite nur mit diesem verdächtigen Block!
Ich hole mir die Navi ja über PHP-Include.
Ich mache mal eben eine Testseite nur mit diesem verdächtigen Block!
- Tommy Herrmann
- Site Admin
- Beiträge: 5865
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: css-Problem mit Scroller am Handy
hmm - ist immer noch der gleiche Querscroller da ![verwirrt :confused:](./images/smilies/confused.gif)
... aber mit
overflow-x: hidden;
müsste Du das ja auf jeden Fall wegbekommen ...
![verwirrt :confused:](./images/smilies/confused.gif)
... aber mit
overflow-x: hidden;
müsste Du das ja auf jeden Fall wegbekommen ...
Re: css-Problem mit Scroller am Handy
So
www.afripix-web.de/scrolltest.php
Und der Scroller ist da![verwirrt :confused:](./images/smilies/confused.gif)
Ich mach mal eben das weg,,,,
www.afripix-web.de/scrolltest.php
Und der Scroller ist da
![verwirrt :confused:](./images/smilies/confused.gif)
Ich mach mal eben das weg,,,,
Code: Alles auswählen
@media (min-width: 768px) {
.g-0 {
margin-right: 0 !important;
margin-left: 0 !important;
& > [class*="col"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
}
- Tommy Herrmann
- Site Admin
- Beiträge: 5865
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: css-Problem mit Scroller am Handy
aus welchem Thema ist denn dieser Block?
Das würde ich gerne hier mal nachstellen ...
Das würde ich gerne hier mal nachstellen ...
- Tommy Herrmann
- Site Admin
- Beiträge: 5865
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: css-Problem mit Scroller am Handy
"BistroM5" oder?
"_name": "features12",
"_sourceTheme": "bistrom5",
https://www.mobirise-tutorials.com/BistroM5/
"_name": "features12",
"_sourceTheme": "bistrom5",
https://www.mobirise-tutorials.com/BistroM5/
Re: css-Problem mit Scroller am Handy
Nee, ist aus AgencyM4..., oder?
Die Seite lebt ja schon seit 6 Jahren.
Mixen von M4 und M5 ist ja sowieso ungeschickt
Es ist die Angabe für ROW.
Wenn ich die Klasse ROW durch CONTAINER ersetze, ist es OK.
Da das im Block selbst nicht steht, ist der Fehler also im Theme
Die Seite lebt ja schon seit 6 Jahren.
Mixen von M4 und M5 ist ja sowieso ungeschickt
Es ist die Angabe für ROW.
Wenn ich die Klasse ROW durch CONTAINER ersetze, ist es OK.
Da das im Block selbst nicht steht, ist der Fehler also im Theme
- Tommy Herrmann
- Site Admin
- Beiträge: 5865
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: css-Problem mit Scroller am Handy
Das ist aus "BistroM5" - so steht es doch in Deiner Datei "project.mobirise" auch drinnen !
Ich habe jetzt diesen Block auch in meine Seite "BistroM5" eingebaut und es gibt keinen Querscroller. Das liegt noch an etwas anderem.
https://www.mobirise-tutorials.com/BistroM5/
Tommy Herrmann hat geschrieben: ↑Mi 6. Mär 2024, 08:23 "BistroM5" oder?
"_name": "features12",
"_sourceTheme": "bistrom5",
https://www.mobirise-tutorials.com/BistroM5/
Ich habe jetzt diesen Block auch in meine Seite "BistroM5" eingebaut und es gibt keinen Querscroller. Das liegt noch an etwas anderem.
https://www.mobirise-tutorials.com/BistroM5/
Re: css-Problem mit Scroller am Handy
Tu das mal in ein M4 Projekt,,,,
Ich denke da an ein Bootstrap Versions Gehuddel
Nun ja, HEUTE würde ich das ja auch nicht mehr machen....
Aber es ist nunmal drin, sehr gründlich drin!
Es ist übrigens auch im nackten Projekt drin
www.afripix.de/scroll
Ich denke da an ein Bootstrap Versions Gehuddel
Nun ja, HEUTE würde ich das ja auch nicht mehr machen....
Aber es ist nunmal drin, sehr gründlich drin!
Es ist übrigens auch im nackten Projekt drin
www.afripix.de/scroll
- Tommy Herrmann
- Site Admin
- Beiträge: 5865
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: css-Problem mit Scroller am Handy
Na denn ...
... ganz klar, Dein eigentliche Projekt-Thema ist "AgencyM4"
Das kann ja nicht gehen![eek :eek:](./images/smilies/eek.gif)
... ganz klar, Dein eigentliche Projekt-Thema ist "AgencyM4"
Code: Alles auswählen
{
"settings": {
"name": "Afripix-Webdesign Gummersbach",
"currentPage": "scrolltest.php",
"theme": {
"name": "agencym4",
"title": "AgencyM4",
"styling": {
Das kann ja nicht gehen
![eek :eek:](./images/smilies/eek.gif)
- Tommy Herrmann
- Site Admin
- Beiträge: 5865
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: css-Problem mit Scroller am Handy
stobi_de hat geschrieben: ↑Mi 6. Mär 2024, 08:34 Tu das mal in ein M4 Projekt,,,,
Ich denke da an ein Bootstrap Versions Gehuddel
Nun ja, HEUTE würde ich das ja auch nicht mehr machen....
Aber es ist nunmal drin, sehr gründlich drin!
Es ist übrigens auch im nackten Projekt drin
www.afripix.de/scroll
ja - und auch dort - im nackten Projekt Beispiel - ist das eben ein M5 Block in einem M4 Thema. Das geht fast nie.
Code: Alles auswählen
{
"settings": {
"name": "Site 2024-03-06 08:35",
"currentPage": "index.html",
"theme": {
"name": "agencym4",
"title": "AgencyM4",
"styling": {
"primaryColor": "#4284DF",
"secondaryColor": "#F27D7A",
"successColor": "#9473D2",
"infoColor": "#7237A2",
"warningColor": "#F8F9C4",
"dangerColor": "#EFEFEF",
"mainFont": "Poppins",
"display1Font": "Poppins",
"display1Size": 4.25,
"display2Font": "Poppins",
"display2Size": 3,
"display5Font": "Poppins",
"display5Size": 1.5,
"display7Font": "Roboto",
"display7Size": 1.06,
"display4Font": "Poppins",
"display4Size": 0.875,
"isRoundedButtons": false,
"isAnimatedOnScroll": false,
"isScrollToTopButton": false
}
},
"path": "@PROJECT_PATH@",
"versionFirst": "5.9.15",
"siteFonts": [],
"uniqCompNum": 1,
"versionPublish": "5.9.15"
},
"pages": {
"index.html": {
"settings": {
"main": true,
"title": "Home",
"meta_descr": "",
"header_custom": "",
"footer_custom": "",
"html_before": ""
},
"components": [
{
"alias": false,
"_styles": {
"padding-top": "(@paddingTop * 1rem)",
"padding-bottom": "(@paddingBottom * 1rem)",
"position": "relative",
"background-color": "@contentColor",
"@media (min-width: 768px)": {
".g-0": {
"margin-right": "0 !important",
"margin-left": "0 !important",
"& > [class*=\"col\"]": {
"padding-left": "0 !important",
"padding-right": "0 !important"
}
}
},
".card_wrapper": {
"padding": "2rem 2rem",
"text-align": "center",
"display": "flex",
"align-items": "center",
"justify-content": "center",
"height": "100%",
"position": "relative",
"@media (max-width: 991px)": {
"padding": "65px 30px",
".shape": {
"width": "auto",
"padding": "0 1rem"
}
}
},
".content_box": {
"position": "relative",
"z-index": "2"
},
".shape": {
"position": "absolute",
"z-index": "1",
"top": "50%",
"left": "50%",
"width": "100%",
"transform": "translate(-50%, -50%)",
"opacity": "(@imgOpacity * 1)",
"padding": "0 100px",
"img": {
"width": "100%",
"height": "100%",
"object-fit": "contain"
}
},
".mbr-section-title": {
"color": "#ffffff",
"margin-bottom": "20px"
},
".mbr-section-btn": {
"margin-top": "43px"
},
".image-wrapper, img": {
"width": "100%",
"height": "100%",
"object-fit": "cover"
},
".mbr-text, .mbr-section-btn": {
"color": "#ffffff"
}
},
"_name": "features12",
"_sourceTheme": "bistrom5",
Re: css-Problem mit Scroller am Handy
Aha....
in der Richtung....
So ist das in dem Block drin. Das muss anders!
in der Richtung....
So ist das in dem Block drin. Das muss anders!
Code: Alles auswählen
.row {
margin-right: -15px;
margin-left: -15px;
}
- Tommy Herrmann
- Site Admin
- Beiträge: 5865
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: css-Problem mit Scroller am Handy
Das ist so in fast jedem Block, der nicht extra auf die volle Breite gestellt wurde.
Du hast übrigens gerade versehentlich einen meiner Beiträge mit Deinem Inhalt überschrieben - ich habe das wieder umgebaut![grinsen :D](./images/smilies/grinsen.gif)
Du hast übrigens gerade versehentlich einen meiner Beiträge mit Deinem Inhalt überschrieben - ich habe das wieder umgebaut
![grinsen :D](./images/smilies/grinsen.gif)
Re: css-Problem mit Scroller am Handy
Ups....
Habe aber jetzt tatsächlich einen Fehler in dem Block gefunden.
Warum der in M5 nicht auftritt, kann ich nicht sagen
Schau mal auf das Mediaquery
Auf dem Handy wurde explizit das margin auf -15px gesetzt. Also es ist im Standard auf -15, und für Handy wurde das nicht zurückgesetzt- so rum ist verständlicher
Habe aber jetzt tatsächlich einen Fehler in dem Block gefunden.
Warum der in M5 nicht auftritt, kann ich nicht sagen
Schau mal auf das Mediaquery
Code: Alles auswählen
@media (min-width: 768px) {
.g-0 {
margin-right: 0 !important;
margin-left: 0 !important;
& > [class*="col"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
}
- Tommy Herrmann
- Site Admin
- Beiträge: 5865
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: css-Problem mit Scroller am Handy
habe jetzt nicht ganz verstanden, was Du meinst.
Dass das hier auf 0 gesetzt wird ist doch richtig, denn man will ja diesen Block auf die gesamte Breite darstellen. Dazu gehört dann aber auch eine Bootstrap-Class, die es vielleicht in M4 Themen so noch nicht gab.
Dass das hier auf 0 gesetzt wird ist doch richtig, denn man will ja diesen Block auf die gesamte Breite darstellen. Dazu gehört dann aber auch eine Bootstrap-Class, die es vielleicht in M4 Themen so noch nicht gab.
Wer ist online?
Mitglieder in diesem Forum: Ahrefs [Bot] und 148 Gäste