css-Problem mit Scroller am Handy

[stobi_de]

Es ist MIN-WIDTH

Also überall, außer auf dem Handy.

[Tommy Herrmann]

ja genau - weil es am Handy eben die 15px Abstand zum Rand haben soll, nachdem der Block sich in 2 Bereiche (Bild und Text) geändert hat.

Gucke doch mal, ob da noch eine Bootstrap-Class mit dran steht. Irgend was mit "card"

https://getbootstrap.com/docs/4.0/components/card/

Gibt es denn in M4 nicht auch so einen Block - ich denke schon. Dann musst Du die Ursache dieser M4/M5 Inkompatibilität nicht ewig suchen ...

[stobi_de]

120 Blöcke ersetzen mit Text-Änderung?

So, habe nun über die Projektdatei hinweg das min-768 durch min-368 ersetzt (halt irgendeine Zahl)
ich finde keinen Scroller mehr.

Wenn in Bootstrap5 eine Section grundsätzlich ein padding von 15px hätte auf einem Handy, könnte ich dieses negative margin verstehen, auch wenn das eine grausige Konstruktion wäre

Aber sonst ist mir das unbegreiflich

[Tommy Herrmann]

... welche Seite hast Du denn jetzt geändert? Die eigentliche Seite (von Deinem 1. Beitrag) ist hier noch unverändert.

[stobi_de]

Oh....
Äh....
also....

Hier gehts....
https://www.afripix-web.de/webdesign-morsbach.php
...
gefunden.
Das gelbe Mädl war noch "verbastelt"

[Tommy Herrmann]

… sorry, hier ist das kein Unterschied. Habe den Overflow-Bereich mal rot eingefärbt:

[stobi_de]

Hast mal im incognito geschaut?
Also bei mir alles OK.

[Tommy Herrmann]

wieso das - ich habe ganz normal geschaut (wie 99% aller Internet-Benutzer) und zuvor auch den Browser Cache gelöscht.

Bei mir ist es eben nicht OK, dafür habe ich den Screenshot erstellt.

[stobi_de]

Tja....
ich kann mir nur vorstellen, dass irgendwo irgendwas nicht auf allen Servern aktuell ist.
Ich hatte ja vorher den Fehler auch auf dem Handy, auch nochmal auf der Gummersbacher-Seite, aber nun ist da alles OK.

Würdest Du bitte von dieser Seite aus
https://www.afripix-web.de/index.php

Ganz unten im Fuß auf Webdesigner-Gummersbach touchen?!
Ist der letzte orange Link

[Tommy Herrmann]

ja - der Link führt mich wieder zu dieser Seite mit dem Overflow.

… übrigens im inkognito Modus ist das kein Unterschied.

Deine Stammseite ist aber OK, da gibt es keinen Overflow.

[Andyneu]

Hallo,
eventuell läßt sich dein Problem mit clamp() lösen.

Code: Alles auswählen

.card {
   width: clamp(100px, 40vw, 100vw);
}

clamp(minimalWert, optimalWert, maximalWert);

Bin mir aber nicht sicher ob es auf card anwendbar ist.

[stobi_de]

Meine Frau hat ein kleineres Samsung - da tritt es auch nicht auf.
Und wo ist da ein Card drin?
Nur so ein card-wrapper, was scheinbar nur ein Name von Mobi ist

[stobi_de]

Ich habe übrigens auch in diesem Projekt den Mini-Scroller
www.sportnahrung-mangold.de

Der Grund ist auch hier die Row-Angabe. Hier im Footer.
In den Static Styles haben wir das hier

Code: Alles auswählen

@media (min-width: 992px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .row {
    margin-left: -16px;
    margin-right: -16px;
  }
  .row > [class*=col] {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@me

Das Projekt ist GameM5 der Footer ist GymnM5

Wenn dieses eingetragen wird, ist alles OK.
Mich deucht, es ist nicht des Stobers Fehler

Code: Alles auswählen

<style>
.row
{
margin-left:0px!important;
margin-right:0px!important;
}

</style>

Auf der Seite INFO-> Berater & Personal Trainer habe ich es in den Header geschrieben

[Tommy Herrmann]

Moin,

ich befürchte, dass ich Dir da auch nicht helfen kann. Ich weiß nicht so recht, wo ich den Fehler überhaupt suchen könnte.

Wenn ich mir diese Seite mit dem Handy angucke, ist der Scroller nur am Footer weg. Ansonsten ist er überall.

Das Thema "GameM5" hat jedenfalls diesen Scroller auch bei der Beispielseite von Mobirise:

https://mobirise.com/extensions/gamem5/video-game/

Ich denke das solltest Du mit Angabe von deren Beispielseite beim Support als Bug melden.

[stobi_de]

Das habe ich schon gestern via Mail gemacht.
Der Eiweiss-Mann will seine Seite zwar online ohne Passwort haben, aber die Seite soll noch nicht breit getreten werden, solange nichtmals eine Bezahlschnittstelle drin ist. Nun ja....

Code: Alles auswählen

.row {
    margin-left: -16px;
    margin-right: -16px;
  }
  

Es liegt jedenfalls eindeutig an diesem Konstrukt, was fürs Handy mit Media-Query ausgenommen wird. was ja auch in meiner eigenen Seite für Verwirrung sorgte.
Vermutlich hat das irgendwer mal falsch bei Mobi eingetragen und dann hat es sich fortgesetzt - so ähnlich wie die line-height: 1, die heute noch in manchen Themes drin ist.

======
Oh, wie unfreundlich von mir: MUTEN MORGEN! Bist schon wieder vor mir!

[Tommy Herrmann]

Ich baue gerade mal das Thema "GameM5" selbst zusammen und habe den gleichen Fehler:

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

(ich habe Deine Style-Anweisung mit 0px jetzt auf meiner Testseite drinnen. Dann geht es.

Ja - das ist ein brutaler Fehler (Bug), den ich auch gleich noch im Hersteller-Forum melden werde …


moin, moin

[stobi_de]

So, ich habe ein nacktes gameM5 mit dem besagten Footer aus GymM5 hier:
www.afripix.de/game

Und siehe da: kein Scroller.

Ich muss mal schaun, wo das negative Margin her kommt. Hm... ist drin

Code: Alles auswählen

@media (min-width: 992px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .row {
    margin-left: -16px;
    margin-right: -16px;
  }
  .row > [class*=col] {
    padding-left: 16px;
    padding-right: 16px;
  }
}

[Tommy Herrmann]

Ich melde den Fehler jetzt - schreibe dann doch auch noch was dazu.

[stobi_de]

Ah... moment - ich befürchte zumindest in meinem Fall einen Stober-Fehler.

Ich habe den Footer ein wenig modifiziert gehabt und erst dann tritt der Fehler auf.
Nicht im original

sehr peinlich!

[Tommy Herrmann]

was auch immer, der BUG ist in jedem Fall im Thema "GameM5" ja da, was man auch an deren Original-Beispielseite gut sehen kann:

https://mobirise.com/extensions/gamem5/ ... ng-portal/

Auf meiner moldifizierten Seite mit dem gleichen Template ist der Overflow weg:

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


Ich habe den Bug gerade hier gemeldet:

https://forums.mobirise.com/discussion/ ... e-check/p1