• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] CSS Problem in der mobilen Ansicht

S

Scolo29

Neues Mitglied
Hallo,

ich bin ziemlicher Neuanfänger im Coding und benötige jedoch aber gerade Unterstützung bei einem akuten Problem: Bei meiner Navigation (vertikal rechts am Bildschirmrand) gehen die einzelnen Links der Navigation zu breit nach Links in den Viewport rein, so dass - insb. in der mobilen Ansischt - man schnell versehentlich auf einen der navigationslinks klickt, obwohl man gerade nur von Section zu Section scrollt... s. Screenshot (Breite des Navigationslinks). Kann mir jemand ggf. weiterhelfen, wie ich das Problem beheben kann? Wäre sehr dankbar!!

Screenshot ist im Anhang und hier noch der CSS Code meiner Navigation:


CSS: 
.navbar {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.5rem 1rem; }
  .navbar > .container,
  .navbar > .container-fluid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }

.navbar-brand {
  display: inline-block;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap; }
  .navbar-brand:hover, .navbar-brand:focus {
    text-decoration: none; }

.navbar-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none; }
  .navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0;

  }
  
  
  .navbar-nav .dropdown-menu {
    position: static;
    float: none; }

.navbar-text {
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem; }

.navbar-collapse {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem; }
  .navbar-toggler:hover, .navbar-toggler:focus {
    text-decoration: none; }

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: no-repeat center center;
  background-size: 100% 100%; }

  @media (max-width: 575.98px) {
    .navbar-expand-sm > .container,
    .navbar-expand-sm > .container-fluid {
      padding-right: 0;
      padding-left: 0; } }

@media (min-width: 576px) {
  .navbar-expand-sm {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start; }
    .navbar-expand-sm .navbar-nav {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row; }
      .navbar-expand-sm .navbar-nav .dropdown-menu {
        position: absolute; }
      .navbar-expand-sm .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem; }
    .navbar-expand-sm > .container,
    .navbar-expand-sm > .container-fluid {
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap; }
    .navbar-expand-sm .navbar-collapse {
      display: -webkit-box !important;
      display: -ms-flexbox !important;
      display: flex !important;
      -ms-flex-preferred-size: auto;
      flex-basis: auto; }
    .navbar-expand-sm .navbar-toggler {
      display: none; } }

@media (max-width: 767.98px) {
  .navbar-expand-md > .container,
  .navbar-expand-md > .container-fluid {
    padding-right: 0;
    padding-left: 0; } }


.navbar-expand {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start; }
  .navbar-expand > .container,
  .navbar-expand > .container-fluid {
    padding-right: 0;
    padding-left: 0; }
  .navbar-expand .navbar-nav {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row; }
    .navbar-expand .navbar-nav .dropdown-menu {
      position: absolute; }
    .navbar-expand .navbar-nav .nav-link {
      padding-right: 0.5rem;
      padding-left: 0.5rem; }
  .navbar-expand > .container,
  .navbar-expand > .container-fluid {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap; }
  .navbar-expand .navbar-collapse {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto; }
  .navbar-expand .navbar-toggler {
    display: none; }

.navbar-light .navbar-brand {
  color: rgba(0, 0, 0, 0.9); }
  .navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
    color: rgba(0, 0, 0, 0.9); }

.navbar-light .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.5); }
  .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
    color: rgba(0, 0, 0, 0.7); }
  .navbar-light .navbar-nav .nav-link.disabled {
    color: rgba(0, 0, 0, 0.3); }

.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
  color: rgba(0, 0, 0, 0.9); }

.navbar-light .navbar-toggler {
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.1); }

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

.navbar-light .navbar-text {
  color: rgba(0, 0, 0, 0.5); }
  .navbar-light .navbar-text a {
    color: rgba(0, 0, 0, 0.9); }
    .navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus {
      color: rgba(0, 0, 0, 0.9); }

.navbar-dark .navbar-brand {
  color: #fff; }
  .navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
    color: #fff; }

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.5); }
  .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
    color: rgba(255, 255, 255, 0.75); }
  .navbar-dark .navbar-nav .nav-link.disabled {
    color: rgba(255, 255, 255, 0.25); }

.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
  color: #fff; }

.navbar-dark .navbar-toggler {
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.1); }

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

.navbar-dark .navbar-text {
  color: rgba(255, 255, 255, 0.5); }
  .navbar-dark .navbar-text a {
    color: #fff; }
    .navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus {
      color: #fff; }

[edit by Mod] Anhang von unbekannter / unseriöser Quelle entfernt
 
Werbung:
Werbung:
Scolo29 schrieb:
Bei meiner Navigation (vertikal rechts am Bildschirmrand) gehen die einzelnen Links der Navigation zu breit nach Links in den Viewport rein, so dass - insb. in der mobilen Ansischt - man schnell versehentlich auf einen der navigationslinks klickt, obwohl man gerade nur von Section zu Section scrollt
Zum Vergrößern anklicken....
Scolo29 schrieb:
Ich habe ein Bootstrap Template verwendet, dieses hier:

Snapshot - Free Bootstrap 4 Template by Colorlib

themewagon.github.io
Zum Vergrößern anklicken....

Sorry! Ich kann das "CSS-Problem" auf meinem Smartphone nicht 1:1 reproduzieren!

Wenn ich die Seite "extrem rechtslastig" nach unten/oben scrolle (schiebe), und dabei mehrmals im rechten Bereich mit dem Finger d'rüberwische, um weiter nach unten/oben zu scrollen (schieben), aktiviere ich keinen der Links (=Sprungmarken)! :oops:

Ich betone hier "extrem rechtslastig", da ich instinktiv/intuitiv eine mobile Webseite immer "linksmittig" scrolle, von wo aus Dein beschriebenes Problem zu 0% existiert! :p

Zum vermeintlich "versehentlichen" Tippen/Klicken muss ich nach dem begonnenen Scrollprozeß "punktgenau/zielgerichtet" in den Navigationsbereich auf einen der Links tippen/klicken, um die "unerwünschte Reaktion" auszulösen, was hier aber nicht aus Versehen geschieht, sondern aus dem beschriebenen Vorgang gezielt angestoßen wird. :rolleyes:

"Mobile Ansicht" ist zudem ein weit dehnbarer Begriff... :frown:

Smartphone (in vertikaler oder horizontaler Ausrichtung), oder Tablet, und mit welcher Bildschirmauflösung?! :confused:

Mein Smartphone hat 6.6" (Zoll), oder dezidiert ausgedrückt 1.080*2.400 Pixel zu bieten.

Lange Rede, kurzer Sinn...

Ein konkretes "CSS Problem in der mobilen Ansicht" kann ich hier nicht erkennen / reproduzieren, sondern ist letztlich eine subjektive Frage der Intuition und Fingerfertigkeit des Nutzers, ob im rechtsbündigen Viewport geschoben/gescrollt, und "versehentlich" beim Absetzen des Fingers anschließend gezielt auf einen der Links getippt(=geklickt) wird.

Fazit - Es gibt (für Deine subjektive Befriedigung) zwei denkbare Lösungsansätze:
  1. Du richtest für die mobile Version die Navigationsleiste horizontal aus
  2. Du implementierst für die mobile Version ein "Hamburger Menu"

Scolo29 schrieb:
ich bin ziemlicher Neuanfänger im Coding
Zum Vergrößern anklicken....
Dann darfst Du Dich in diesem Punkt direkt weiterbilden...

Mobile Version = Media Queries
  1. Grundlagenforschung: CSS Media Queries (Google-Empfehlung, da ich Deine präferierte Quelle nicht kenne)
  2. Bootstrap: Breakpoints
 
Scolo29 schrieb:
Screenshot ist im Anhang
Zum Vergrößern anklicken....

Der Link wurde von mir aus Sicherheitsgründen entfernt, da wir Deine hochgeladene Datei zunächst als nicht-seriös einstufen müssen!

Bei einem neu-registrierten User darfst Du davon ausgehen, dass hier niemand Deinen hochgeladenen Dateien vertraut, und sie sich blindlings / naiv herunterlädt!

"Phishing-Attack" ist hier das Stichwort, und wird von mir (und unserem Moderatorenteam) in den Forenbeiträgen zum Schutz aller User konsequent verfolgt und entsprechend behandelt!

Außerdem ist ein schlichter Screenshot der Website nicht zielführend, wenn es um die praktische Fehleranalyse und -lösung geht!

Ich kann Dir aus der Praxis für die Zukunft nur empfehlen, von hochgeladenen Anhängen Abstand zu nehmen, und stattdessen entweder direkt auf die problembehaftete Website zu verlinken, oder einen Developer-Playground à la https://jsfiddle.net/ zu nutzen, wo Du den HTML-/CSS/-JS-Quellcode eintragen, und das Resultat hier als Link posten kannst.

Genutzte CSS-/JS-Bibliotheken (bootstrap, jquery, ...) lassen sich dort via "Resources" auch direkt via URL einbinden / hinterlegen.

https://jsfiddle.net/ schrieb:
  • Paste a direct CSS/JS URL
  • Type a library name to fetch from CDNJS
Zum Vergrößern anklicken....
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben