Wie kann ich einstellen, dass die div-Boxen auf dem Handy untereinander dargestellt werden?
Guten Tag.
Mein Problem ist Folgendes: Auf dem PC werden die Boxen ganz normal und wie gewollt dargestellt, doch auf dem Handy wird alles in die Reihe gequetscht und man kann nichts erkennen. Wie kann ich nun einstellen, dass die div-Boxen untereinander dargestellt werden?
LG
Quellcode:
<?php
require('templates/header.php');
?>
<div class="content">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Kampagnen</h3>
</div>
<br><br>
<div class="row">
<div class="col-xs-12">
<div class="box box-container">
<div class="row">
<div class="col-xs-12">
<div class="box-first box-container">
<div class="row">
<div class="col-xs-1">
<div class="row">
<div class="col-xs">
<div class="box-nested" text-align="center">
<img src="templates/XXX.png"/>
</div>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="box-nested">
<strong> XXX </strong>
</div>
</div>
<div class="col-xs-3">
<div class="box-nested">
<h4>
<span class="badge badge-pill badge-success">XXX: 1,10€</span>
<span class="badge badge-pill badge-secondary">XXX: 1,00€</span>
</h4>
</div>
</div>
<div class="col-xs-4">
<div class="box-nested">
<span>
<h4>
<font color="#400040">
<input name="text" id="myInput" id="text" width="100%;" ?>">
<button class="badge badge-pill badge-danger" onclick="myFunction()">Link Kopieren</button>
</h4>
</font>
<script>
function myFunction() {
var copyText = document.getElementById("myInput");
copyText.select();
document.execCommand("copy");
}
</script>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-body all-icons">
<div class="row">
<div class="wrap-table100">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
require('templates/footer.php');
?>
Das CSS, welches zugegebener Weise sehr unübersichtlich ist^^, lautet wie folgt:
6 Antworten
auf dem Handy wird alles in die Reihe gequetscht und man kann nichts erkennen
Genau so hast Du es doch angegeben:
<div class="row">
<div class="col-xs-1">
<div class="row">
<div class="col-xs">
...
</div>
</div>
</div>
<div class="col-xs-3">
...
</div>
<div class="col-xs-3">
...
</div>
<div class="col-xs-4">
...
</div>
</div>
Du sagst damit, bei viewport-Größe "xs" sollen die <div> nebeneinander dargestellt werden. 1 - 3 - 3 - 4.
Ersetze -xs- z. B. durch -md- dann sollte es klappen.
Alex
Du verwendest doch offensichtlich Bootstrap, was die Inhalte eigentlich responsive ausrichtet, sofern man das Grid so baut, wie gedacht und die Styles dazu nicht überschreibt.
https://getbootstrap.com/docs/4.0/layout/grid/#responsive-classes
Den font-Tag solltest du sofort rauswerfen, denn er ist veraltet. Setze die Farbe stattdessen via CSS. Und wenn es Inline-Styles sein müssen:
<h4 style="color: #400040">....</h4>
In diesem Zuge verschwinden auch gleich noch ein weiterer Markupfehler.
Des Weiteren ist text-align kein HTML-Attribut, sondern ein CSS-Property.
Indem du durch Abfrage der Bildschirmgrösse dass entsprechende Script aufrufst
Was bezweckst Du mit dieser Zeile?
<input name="text" id="myInput" id="text" width="100%;" ?>">
Sollte das nicht heißen
<input name="text" id="myInput" id="text">
Alex
Denke auch, dass es nach dem STG+C --> STRG+V einfach nur ein Flüchtigkeitsfehler war^^
Das eigentlich Interessante an Deinem Quellcode hast Du weggelassen. Wie sieht der Inhalt der Datei templates/header.php aus?
Alex
Da wäre aber immer noch eine ID zu viel. 😁
Er muss in obiger Version wohl irgendetwas mit PHP gemacht haben. Entweder nur hier für die Fragestellung oder schon zuvor.