css-Problem mit Scroller am Handy

[stobi_de]

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

[Tommy Herrmann]

Moin,

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):

[stobi_de]

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.

[Tommy Herrmann]

wie willst Du das denn für das Handy machen - das geht nicht im Quellcode vom Browser- Werkzeug

[stobi_de]

Im Quellcode mit FTP

[Tommy Herrmann]

... 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

Was ist dennn das z.B. für ein CSS-Monster

https://www.afripix-web.de/WOW-master/c ... nimate.css

[stobi_de]

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!

[Tommy Herrmann]

hmm - ist immer noch der gleiche Querscroller da


... aber mit

overflow-x: hidden;

müsste Du das ja auf jeden Fall wegbekommen ...

[stobi_de]

So
www.afripix-web.de/scrolltest.php
Und der Scroller ist da
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]

aus welchem Thema ist denn dieser Block?

Das würde ich gerne hier mal nachstellen ...

[Tommy Herrmann]

"BistroM5" oder?

"_name": "features12",
"_sourceTheme": "bistrom5",


https://www.mobirise-tutorials.com/BistroM5/

[stobi_de]

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

[Tommy Herrmann]

Das ist aus "BistroM5" - so steht es doch in Deiner Datei "project.mobirise" auch drinnen !

"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/

[stobi_de]

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

[Tommy Herrmann]

Na denn ...

... 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

[Tommy Herrmann]

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",

[stobi_de]

Aha....
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]

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

[stobi_de]

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

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;
    }
  }
}

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

[Tommy Herrmann]

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.