responsive mobile - column wrap funktioniert nicht.

hadi_macht_peng

HI Leute,

ich versuche die Seite dazu zu bringen, dass ich bei aufrechter Haltung des Handys 1 Spalte habe und beim quer halten / bzw. Verwendung von einem Tablet 2 Spalten habe.
Leider habe ich immer entweder nur 1 Spalte bei beidem oder aber bei aufrechter haltung 1 Spalte, die aber genau wie beim quer halten nur 50% des Display füllt.
Ich hab mich nur mit tutors etc. soweit gehangelt, da ich ewig keine HP mehr gebaut habe und dies meine 1. mobile optimierte Seite werden soll.
Vermutlich fehlt mir nur irgendwo ein code-Schnipsel oder etwas Feintuning. Bitte helft einem Dinosaurier, hab das letzte Mal eine Homepage gebaut als man noch mit Tabellen gearbeitet hat.^^ hab aktuell die CSS im Head, das wir natürlich noch geändert sobald es funzt.
Hatte schon die externe css im verdacht vom navi script, aber diese zu entfernen zerlegt nur die Formatierung des obersten Balkens der Navigation, ansonsten hat sich nichts geändert...

Version 1: immer nur 1 Spalte:

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<style>




@viewport {
  width: device-width ;
  zoom: 1.0 ;
} 


@-ms-viewport {
  width: device-width ;
} 




/* Mobile Styles */
@media only screen and (max-width: 400px) {
   display: flex ;
   align-items: stretch ;
   flex-flow: column wrap ;
   .links,
   .rechts {
   width: 100%;
  }
}


/* Tablet Styles */
@media only screen and (min-width: 401px) {


  .links,
  .rechts {
    width: 50%;
  }
}




body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #000000;
}


.mobile-container {
  max-width: 100%;
  margin: 0px;
  background-color: #000000;
  height: 100%;
  color: white;
  border-radius: 0px;
}


.topnav {
  overflow: hidden;
  background-color: #000000;
  position: relative;
}


.topnav #myLinks {
  display: none;
}


.topnav a {
  color: #fb911b;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
  background-color: #000000;
}


.topnav a.icon {
  background: #fb911b;
  color: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}


.topnav a:hover {
  background-color: #fb911b;
  color: black;
}


.active {
  background-color: #fb911b;
  color: black;
}




#banner {
  position: realtive;
  background-position: center;
  padding: 0px 0px;
  max-width:100%; height:375px;
  background-image: url("../gfx/Banner2.jpg");
  border-top: 2px solid #2F2F2F;
  border-bottom: 2px solid #2F2F2F;
}




#TGU {
  position: relative;
  color: #fb911b;                  /* Schriftfarbe schwarz */
  font-family: Impact;
  font-size: 100px;
  padding-left: 16px;
  text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;
}




#TGU2 {


  position: realtive;
  color: #fb911b;                  /* Schriftfarbe schwarz */
  font-family: Impact;
  font-size: 40px;
  padding-left: 16px;
  margin: 0 auto;


  line-height: 40px;
  text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;
}




#trenner {
  position: realtive;
  height: 20px; width: 98%;
  background-color: #000000;        /* Hintergrundfarbe für die Navigation */
}




.links {
  float: left;
  padding-left: 16px;
  background-color: #000000;
}


.links {




    margin: 0 auto;
    background-color: #000000;
    color: #707070;                  /* Schriftfarbe schwarz */
    font-family: Arial;
    text-align: left;


}




.links h1{
  color: #fb911b ;                  /* Schriftfarbe schwarz */
  font-family: Impact;
  font-size: 35px;
  line-height: 40px;
  text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;
}




.links h2{
  color: #fb911b ;                  /* Schriftfarbe schwarz */
  font-family: Arial;
  font-size: 20px;
  line-height: 20px;
  text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;
}




.links a{
color:#fb911b;
font-weight:bold;
text-decoration:none;
}




.links a:hover{
color:#FF3F00;
font-weight:bold;
text-decoration:none;
}






.rechts {
  float: left;
  padding-left: 16px;
  background-color: #000000;
}


.rechts {




    margin: 0 auto;
    background-color: #000000;
    color: #707070;                  /* Schriftfarbe schwarz */
    font-family: Arial;
    text-align: left;


}




.rechts h1{
  color: #fb911b ;                  /* Schriftfarbe schwarz */
  font-family: Impact;
  font-size: 35px;
  line-height: 40px;
  text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;
}




.rechts h2{
  color: #fb911b ;                  /* Schriftfarbe schwarz */
  font-family: Arial;
  font-size: 20px;
  line-height: 20px;
  text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;
}




.rechts a{
color:#fb911b;
font-weight:bold;
text-decoration:none;
}




.rechts a:hover{
color:#FF3F00;
font-weight:bold;
text-decoration:none;
}




img {
    max-width: 100%;
    height: auto;      
}


</style>






<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>








<body>


<!-- Simulate a smartphone / tablet -->
<div class="mobile-container">


<!-- Top Navigation Menu -->
<div class="topnav">
  <a href="index.php" class="active">Home</a>
  <div id="myLinks">
    <a href="ueber_uns.php">&Uuml;ber Uns</a>
    <a href="regeln.php">Clan Regeln</a>
    <a href="spiele.php">Spiele</a>
    <a href="videos.php">Videos</a>
    <a href="twitch.php">Twitch</a>
    <a href="kontakt.php">Kontakt</a>
    <a href="berwerbung.php">Mitglied werden</a>
    <a href="impressum.php">Impressum</a>
    <a href="datenschutz.php">Datenschutzerkl&auml;rung</a>
  </div>


<a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>


<div>




<div id="banner">








<div id="TGU">
TGU
</div>


<div id="TGU2">
the gaming unit
</div>




</div>


<!--
Ende Banner
-->




<!--
Anfang Content
-->


<div id="trenner"></div>




<div class="links">




<img src="../gfx/logo.jpg" alt="" border="0">
<br>
<br>
<h1>Mitglied werden</h1>
Haben wir Euer Interesse geweckt?!
<br>
Das freut uns!
<br>
<br>
Es w&auml;re sch&ouml;n wenn Ihr dem unten-stehenden Link zum Bewerbungsformular folgt. Dann h&auml;tten wir schon mal ein paar Infos &uuml;ber Euch.
<br>
<br>
Alternativ k&ouml;nnt Ihr uns aber auch ganz unb&uuml;rokratisch direkt auf unserem Discord ansprechen. Unsere Clan Leader sind aber nat&uuml;rlich nicht zu jeder Zeit online.
<br>
<br>
<a href="bewerbung.php">zum Bewerbungs-Formular</a>
<br>
<br>






<h1>Spiele</h1>
Aktuell spielen wir nat&uuml;rlich viel Battlefield V. Das hei&szlig;t aber nicht, dass wir nicht auch mal was anderes zocken. Es gibt bei uns auch aktive League of Legends Spieler, wir spielen PUBG, Ring of Elysium und andere Games.
<br>
<br>
<a href="spiele.php">weiter lesen...</a>
<br>
<br>


















<h1>&Uuml;ber Uns</h1>
Wir legen Wert auf einen freundlichen Umgang miteinander, f&uuml;r uns steht der Spa&szlig; am Spiel im Vordergrund.
<br>
<br>
Wir sind &uuml;berwiegend zwischen 20 und 40 Jahre alt und haben verschiedenste Hintergr&uuml;nde. Vom Studenten/in bis zum Familienvater ist alles mit dabei und willkommen.
<br>
<br>
<a href="ueber_uns.php">weiter lesen...</a>
<br>
<br>




</div>




<div class="rechts">




<h1>Clan Regeln</h1>
Die Kurzversion - sein kein Arsch. 
<br>
<br>
Im Gro&szlig;en und Ganzen gelten bei uns die ganz normalen Regeln f&uuml;r ein gesundes Miteinander. Wir sind doch alle hier um Spa&szlig; zu haben.
<br>
<br>
F&uuml;r alle weiteren Details bitte einmal unten auf weiter lesen klicken.
<br>
<br>
<a href="regeln.php">weiter lesen...</a>
<br>
<br>








<h1>Twitch</h1>
Schaut doch mal auf unserem<br>
Twitch rein:<br>
<br>


<a href="twitch">Live Stream TGU  </a> <br>
<a href="twitch_spyro">Live Stream Spyr0_cs</a>   <br>
<a href="twitch_videos">Twitch Videos  </a>
<br>
<br>


<h1>Discord</h1>
<iframe src="https://discordapp.com/widget?id=428195849760407562&theme=dark" width="100%" height="500" allowtransparency="true" frameborder="0"></iframe>














</div>












<!--
Ende Content
-->


















<!-- End smartphone / tablet look -->




<script>
function myFunction() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
</script>


</body>
</html>

Alles anzeigen

Gastl

Da man deinen Code auf keiner Seite ansehen kann, Onlinelink fehlt, fiel mir nur eines auf.
Im CSS deklariert man erst allgemeine Angaben, dann mit @media screen die Ausnahmen. Das scheint bei dir anders zu sein.

hadi_macht_peng

Stimmt, probier das morgen als erstes. Hier übrigens der link, sorry: http://www.thegamingunit.de/mobile/mobile_navi.php

Das hier ist die original Seite. http://Www.thegamingunit.de

Ich bin davon ausgegangen, dass ich bei @media was falsch mache...

Sailor

Bitte teste mal, ob ...

HTML

* {
   box-sizing: border-box;
}

im CSS dich deinem Ziel näher bringt?

MrMurphy

Hallo hadi_macht_peng

Deine Vorstellungen von aktuellem HTML und CSS sind schlicht falsch.

So gibt es keine media-Angaben die für bestimmte Endgeräte stehen. Viele media-Angaben haben sich in der Praxis zudem als hinderlich erwiesen und sollten nicht verwendet werden. Grade viele Anfänger sind leider immer noch der Ansicht, alle CSS-Angaben ließen sich sinnvoll verwenden.

Die media-Angaben sollten sich immer auf den Inhalt beziehen und nicht mit Endgeräten in Verbindung gebracht werden.

Auch überfordert die gleichzeitige Verwendung von max-width und min-width viele Webseitenersteller. Das ist nicht notwendig und sollte vermieden werden. In der Praxis haben sich entweder nur die Verwendung von max-width (Desktop First) oder nur die Verwendung von min-width (Mobile First) bewährt.

Zudem erscheint mir eine zweispaltige Darstellung ab 400px Breite ziemlich sinnfrei, außer eine Spalte ist deutlich schmaler als die andere. Je nach Inhalt ist eine zweispaltige Darstellung erst ab 500px oder noch mehr sinnvoll.

Zitat

Bitte teste mal, ob ...

Sollten nicht erst mal die Fehler und unsinnigen Konstruktionen beseitigt werden? Zum Beispiel den Quelltext nach den HTML5-Regeln erstellen, wenn HTML5 für den Browser vorgegeben wird? Und was ist mit Angaben wie

Code

/* Mobile Styles */
   @media only screen and (max-width: 400px) {
      display: flex;
      align-items: stretch;
      flex-flow: column wrap;


      .links,
      .rechts {
         width: 100%;
      }
   }

Alles anzeigen

Gruss

MrMurphy

Tags