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

Frage Flex-Buttons verändern Größe

majesticc89

majesticc89

Mitglied
Hi Leute,
ich mache für meine Website die "mobile Version".
Habe vier Buttons erstellt und diese in einen Container gepackt.

display: flex
justify-content: space between

Alle 4 Buttons habe ich auf "flex" gesetzt.

Problem: Beim Testen wird es normal angezeigt, alles gut. Schau ich es dann über mein Galaxy S6 an, sind die Buttons zu klein und der Text (bsw. HOME) geht über die Buttons hinüber.
Der selbe Effekt passiert beim Testen (mit der Website: http://quirktools.com/screenfly/ )
wenn ich "Allow Scrolling" aktiviere. Dann werden die Buttons ebenfalls plötzlich kleiner und der Text geht darüber hinaus.

Weiß jemand an was das liegen könnte?
 
Hallo

Ich sehe auf der verlinkten Seite keine vier Buttons.

Weiß jemand an was das liegen könnte?
Zum Vergrößern anklicken....

Eine starke Vermutung.

ich mache für meine Website die "mobile Version".
Zum Vergrößern anklicken....

Es gibt schlicht keine Websites für mobile Geräte, da mobile Geräte (was immer du auch darunter verstehen willst) von den Browsern überhaupt nicht erkannt werden können. Damit ist dein Vorgehen von Beginn an zum Scheitern verurteilt.

Hast du überhaupt schon als Grundlage einen sauberen HTML-Quelltext im body-Bereich nach den aktuellen HTML-Regeln erstellt? Wenn nicht, solltest du damit beginnen.

wenn ich "Allow Scrolling" aktiviere
Zum Vergrößern anklicken....

Wie willst du das aktivieren, da es doch sinnvollerweise grundsätzlich aktiviert ist? Eingriffe in das Browserhandling sollten grundsätzlich unterbleiben, das ist schlechter Stil.

Schau ich es dann über mein Galaxy S6 an, sind die Buttons zu klein und der Text (bsw. HOME) geht über die Buttons hinüber.
Zum Vergrößern anklicken....

Das deutet darauf hin, dass du Flexbox verwendest ohne dessen Grundlagen gelernt zu haben.

Gruss

MrMurphy
 
:) Ich dachte es sei selbsterklärend aber nun gut. Ich habe eine "normale Seite". Diese habe ich in einem dreispaltigem Layout mit Flexbox gemacht. Funktioniert einwandfrei, egal mit welchen Auflösungen man drauf schaut. Mit Flexboxen kenne ich mich schon aus, vielleicht nicht inn und auswendig aber gut genug um mit diesen zu arbeiten.
Jetzt ist es nun mal so, dass die Flexbox auch auf dem Handy runterscalliert. Das sieht weiderrum blöd aus, weshalb ich eine "mobile Version" mache. Ich habe das nicht studiert, sondern mir alles selber beigebracht. Mir ist bewusst, dass man alles besser machen kann, ich arbeite aber mit dem was ich habe :)
Ich "umschreibe" es anders.: Ich arbeite mit "@media only screen and (max-width: 480px)"
und mit " <meta name="viewport" content="width=device-width">"

Was ich gemacht habe steht oben (Container Button etc.)
Nur verstehe ich nicht, wieso die Buttons uhrplötzlich kleiner werden.
DIe Seite, die ich verlinkt habe, iist die Seite, mit der ich unterschiedliche Auflösungen teste.
Ich mache meine Website mit XAMPP, weswegen ich sie nicht verlinken kann.

CSS:
Code: 
div.mobilebuttons {
        margin-top: 3%;
       display: flex;
        justify-content: space-between;
       text-decoration: none;
       list-style: none;
       color: black;
    }
   
    div.mobilebuttons a{
        color: black;
        text-decoration: none;
    }
   
    button.button1 {
        display: flex;
        border-radius: 5px;
        background-color: #d9e79b;
        padding-top: 1%;
        box-sizing: border-box;
        padding-bottom: 1%;
        padding-left: 2%;
        padding-right: 2%;
    }
   
    button.button2 {
        display: flex;
        border-radius: 5px;
        background-color: #d9e79b;
        padding-top: 1%;
        padding-bottom: 1%;
        padding-left: 2%;
        padding-right: 2%;
    }
   
    button.button3 {
        display: flex;
        border-radius: 5px;
        background-color: #d9e79b;
        padding-top: 1%;
        padding-bottom: 1%;
        padding-left: 2%;
        padding-right: 2%;
    }
   
    button.button4 {
        display: flex;
        border-radius: 5px;
        background-color: #d9e79b;
        padding-top: 1%;
        padding-bottom: 1%;
        padding-left: 2%;
        padding-right: 2%;
    }
   
    button.active {
    background-color: #ddc295;
    color: black;
  }

wobei das "display: flex" bei den Buttons nur zu testzwecken eingefügt worden ist. FUnktioniert auch ohne!

HTML
Code: 
<div class="mobilebuttons">
         <button class="button1 active"><a href="index.html"> TEST 1 </a></button>
         <button class="button2"><a href="test2.html"> TEST 2 </a></button>
         <button class="button3"><a href="test3.html"> TEST 3 </a></button>
         <button class="button4"><a href="test4.html"> TEST 4 </a></button>
     </div>

Die Site wird auf dem Handy super angezeigt, das ist nicht das Problem. LEdiglich habe ich ein Problem mit den Buttons. Wenn es eine bessere Option gibt, sie neben einander anzuordnen als Flexbox, bin ich für neues sehr gerne offen.
 
Hallo

Flexbox ist die beste Medizin.

Das Problem dir zu helfen besteht darin, dass aus deinen Quellcodeschnipseln und deinen sonstigen Angaben das Problem überhaupt nicht nachvollziehbar ist.

Gruss

MrMurphy
 
HTML:
Code: 
<!doctype html>
<html>
  <head>
    <title>TESTPAGE</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
  </head>
  <body>
    <header>
    </header>
    <div id="flexbox">
     <nav>
       <div class="menu">
          <ul>
            <li><a href="index.html"class="active">Home</a></li>
            <li><a href="test1.html">TEST1 &#x2B9A </a>
              <ul>
                <li><a href="test11.html">TEST11</a></li>
                <li><a href="test12.html">TEST12</a></li>
                <li><a href="test13.html">TEST13</a></li>
                <li><a href="test14.html">TEST14</a></li>
              </ul>
            </li>
            <li><a href="test2.html">TEST2</a></li>
            <li><a href="test3.html">TEST3</a></li>
            <li><a href="test4.html">TEST4</a></li>
          </ul>
       </div>
     </nav>
     <main>
        <img id="img1" src="bilder/bild1.gif">
       <div class="mobilebuttons">
         <button class="button1 active"><a href="index.html"> Home </a></button>
         <button class="button2"><a href="test1.html"> TEST1 </a></button>
         <button class="button3"><a href="test2.html"> TEST2 </a></button>
         <button class="button4"><a href="test3.html"> TEST3 </a></button>
        </div>
       <h2 align="center"> Herzlich Willkommen</h2>
        <p> &nbsp; </p>
        <p id="p1" align="center"> Bla Bla Bla. </p>
        <p id="p2" align="center"> Und weiter gehts mir BLA BLABLA BLA BLA BLA BLA BLA BLA BLAAAAAAAAAAAAAA</p>
        <p id="p3" align="center"> Aktuell ist folgendes: <a href="test1.html" target="_self">TEST1</a> </p>
     </main>
     <aside>
       <p align="center"><img src="bilder/bild1.gif" </p>
     </aside>
    </div>
    <footer>
     <p> Besucht uns auf: <span><a href="#" target="new"><img src="bilder/bild2.png"></a></span></p>
    </footer>
  </body>
</html>

CSS:
Code: 
@charset "UTF-8";

body {
    background: url(../bilder/background.png);
}

#flexbox {
    display: flex;
    justify-content: center;
}

/* NAVIGATION */
nav {
    color: black;
    box-sizing: border-box;
    padding-left: 1%;
    width: 15%;
}

div.menu {
}

  div.menu ul {
    text-decoration: none;
    color: black;
    background-color: #bfbfbf;
    text-align: center;
    list-style: none;
    padding-left: 0px;
  }
 
  div.menu ul ul {
    background-color: lightgrey;
    display: none;
    list-style: none;
  }
 
  div.menu a {
    padding: 6%;
    display: block;
    text-decoration: none;
    color: black;
    list-style: none;
  }
 
  div.menu ul ul a{
    background-color: lightgrey;
  }
 
   div.menu li {
  }
 
  div.menu a:hover {
    background-color: #d9e79b;
  }
  div.menu a.active {
    background-color: #ddc295;
    color: black;
  }
  div.menu ul li:hover ul{
    display: block;
  }

/* MAINCONTENT */
main {
    width: 68%;
    margin-left: 1%;
    margin-right: 1%;
    padding-left: 1%;
    padding-right: 1%;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    min-height: 620px;
}

#img1 {
  display: none;
}

div.mobilebuttons {
    display: none;
}

aside {
    width: 15%;
}

aside img {
    padding: 1%;
    height: auto;
    width: 90%;
}

footer {
    text-align: right;
}

footer img {
    padding-top: 1%;
    padding-right: 1%;
    height: auto;
    width: 3%;
}

@media only screen and (max-width: 480px) {
 
    #flexbox {
     justify-content: center;
    }
 
    nav {
        display: none;
    }
 
    main {
        border: none;
        width: 98%;
       margin: auto;
        min-height: 430px;
    }
 
    #img1 {
    width: 30%;
    height: auto;
    display: block;
    margin: auto;
    }
 
    #p1 {
        width: 70%;
        margin: auto;
    }
 
    #p2 {
        display: none;
    }
 
    #p3 {
        display: none;
    }
 
    div.mobilebuttons {
        margin-top: 3%;
       display: flex;
        justify-content: space-between;
       text-decoration: none;
       list-style: none;
       color: black;
    }
 
    div.mobilebuttons a{
        color: black;
        text-decoration: none;
    }
 
    button.button1 {
        display: flex;
        border-radius: 5px;
        background-color: #d9e79b;
        padding-top: 1%;
        box-sizing: border-box;
        padding-bottom: 1%;
        padding-left: 2%;
        padding-right: 2%;
    }
 
    button.button2 {
        display: flex;
        border-radius: 5px;
        background-color: #d9e79b;
        padding-top: 1%;
        padding-bottom: 1%;
        padding-left: 2%;
        padding-right: 2%;
    }
 
    button.button3 {
        display: flex;
        border-radius: 5px;
        background-color: #d9e79b;
        padding-top: 1%;
        padding-bottom: 1%;
        padding-left: 2%;
        padding-right: 2%;
    }
 
    button.button4 {
        display: flex;
        border-radius: 5px;
        background-color: #d9e79b;
        padding-top: 1%;
        padding-bottom: 1%;
        padding-left: 2%;
        padding-right: 2%;
    }
 
    button.active {
    background-color: #ddc295;
    color: black;
  }
 
    aside {
        display: none;
    }
 
    footer {
        display: none;
    }
 
 
}

Für die Schnipsel entschuldige ich mich. Dachte für meine "Kinderprobleme" ist das nicht nötig :)
Wie man sieht ist das eine seeeeeehr einfach gehaltene Seite. Absolut nichts außergewöhnliches.
Füge ich die Buttons hinzu und teste sie sehen sie mit dem Text normal aus. Alles in Ordnung. Wenn ich die Seite über mein (oder Freundin etc.) Handy lade sind die Buttons plötzlich etwas kleiner und der Text geht über diese hinaus. Aus mir völlig unerklärlichen Gründen. Ich habe nicht einmal den Hauch einer Ahnung an was das liegen könnte....

Quasi so:
cool.jpg
 
Zuletzt bearbeitet:
Hallo

Ich kann dein Problem leider nicht praktisch nachvollziehen, da es auf meinem Smartphone nicht auftritt.

Probier mal folgendes:

Ersetze

Code: 
<meta name="viewport" content="width=device-width">

durch

Code: 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Gruss

MrMurphy
 
Hallo

Ich habe mal eine Seite mit deinen Quelltextschnipseln erstellt und mit der von dir verlinkten Seite Screenfly getestet. Auch dort trat das Problem nicht auf. Du kannst meine Beispielseite ja mal selbst aurufen:

http://boratb.bplaced.net/index34.html

Vielleicht können Andere damit das Problem nachvollziehen oder auch nicht und dir dann helfen.

Mir fällt nichts weiter zu deinem Problem ein.

Gruss

MrMurphy
 
Ich habe doch den gesamten Quelltext geschickt und keine Schnipsel. Und deine "neu" erstellte Seite funktioniert bei mir auch einwandfrei.
Und meine hat nach wie vor denselben Fehler. Ich werde mal Schritt für Schritt durchsehen, was du anders gemacht hast.
Danke dir schon mal für alles!
 
Hallo

Ich habe die Testseite aus deinen ersten Quelltextangaben erstellt.

Aber auch mit deinem vollständigen Quelltext ist das Problem nicht nachzuvollziehen. Auch dazu habe ich eine Testseite erstellt, an der du oder andere Helfer es selbst ausprobieren können:

http://boratb.bplaced.net/index35.html

Gruss

MrMurphy
 
Also ich weiß es nicht, bei mir wird es nach wie vor mit "kleineren" Buttons angezeigt aufm Handy (Galaxy S6 Edge) Und auf dem Handy meiner Freundin (Huawei) auch.
Siehe oben verlinktes Bild.
Verstehe dich natürlich auch, aber ich bilde es mir ja nicht ein :D
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben