Kann mir jemand bei HTML/CSs helfen?

Ich hab da eine Frage an die ganzen Webdesign-Profis von euch:

Folgendes:

Auf meinem iPhone 11 Pro habe ich das Problem, dass wenn ich auf der Leistungen-Seite bin, immer ein wenig zu viel rand auf der rechten seite ist, was beim hoch und runter scrollen extrem stört. Für die Produkt-Präsentation nutze ich eingebaute Plugins von Elfsight, welche ich aber durch Custom-Css stylen kann. Wo liegt das problem? warum tritt das bei dieser Seite auf aber sonst nirgendwo? Muss ich etwas an diesen Plugins ändern oder liegt es an etwas anderen?

Hier ein Link: https://online.bss.design/leistungen.html

Achtung: Bei größeren Bildschirmen tritt das Problem nicht auf.

Answer 1

[FaTech]

Habe mal ein bisschen an deinem sourcecode gespielt. Als ich padding-left: 0; und padding-right: 0; entfernt habe, funktionierte es.

Getestet habe ich es mit dem Element:

Aber es könnten auch andere betroffen sein. Ich weiß nicht, welche alle das haben. Es liegt aber auf jeden Fall an den paddings da

Wenn ich das richtig sehe, hast du bootstrap benutzt. Daran würde ich nichts ändern. Aber die paddings dort oben drin, die sind nicht von bootstrap, sondern von wo anders. Die müssen weg

Answer 2

[regex9]

In solchen Fällen gibt es mindestens ein Element im Dokument, welches eine größere Breite annimmt, als es eigentlich haben sollte.

In deinem Fall wird es durch den horizontalen margin bewirkt, welcher auf dieses Element

.container.Page-Navigation-List-Container > .row

angewandt wird.

Der dazugehörige Selektor:

.row {
  --bs-gutter-x: 1.5rem;
  /* ... */
  margin-right: calc(var(--bs-gutter-x) * -.5);
  margin-left: calc(var(--bs-gutter-x) * -.5);
}

Wenn du beide margin-Werte auf 0 setzt, verschwindet der Rand. Nimm am besten den Selektor, mit dem ich oben das konkrete Element bezeichnet habe, um die Werte zu überschreiben. Formuliere dazu auch einen Media Query, so wie:

@media only screen and (max-device-width: 480px) {
  .container.Page-Navigation-List-Container > .row {
    margin-left: 0;
    margin-right: 0;
  }
}

Comments

[FaTech]

Dann würde er bootstrap ändern. Er hat selber aber padding Werte gesetzt und die scheinen den Fehler zu verursachen. Bootstrap selber hat den Fehler ja nicht

[regex9]

@FaTech

Ja, so würde ein Style von Bootstrap für ein einziges Element überschrieben werden. Das habe ich gesehen. Es ist an der Stelle aber einfacher, diesen Style zu überschreiben, als den Inline Style mit !important übertrumpfen zu müssen.