Div nimmt nicht volle Breite an trotz 100vw?

Hallo zusammen,

Ich arbeite gerade an einer Website für meinen Verein.

Ich beschäftige mich jetzt mit dem Thema responsive design… Nun will ich anfangen und habe schon mal vorab getestet wie es denn auf einem Smartphone aussehen würde (mit Crome Entwickler Tools). Nur ist jetzt das Problem, dass trotz der Einstellung width: 99vw; das div, was meine ganze Seite umschließen, in der Handy Version nur halb so groß ist (Siehe Foto)

Das beeinflusst auch irgendwie meine ganze Seite die dadurch ziemlich verzogen wird.

Vielen Dank im Voraus😊

Bild zum Beitrag

3 Antworten

Xandros0506

18.07.2024, 16:26

dass trotz der Einstellung width: 99vw; das div, was meine ganze Seite umschließen, in der Handy Version nur halb so groß ist (Siehe Foto)

dein Problem ist das "vw"!

vw und vh beziehen sich auf den Viewport des Endgerätes und somit die Größe des verfügbaren Screens inklusive den Dokument-Margins.

% hingegen bezieht sich auf den verfügbaren Platz für das Element.

Johann1234448

Beitragsersteller

18.07.2024, 16:31

Und was soll ich dann machen Prozent verwenden? Klappt halt auch nicht

Mauritan

18.07.2024, 16:24

Was passiert mit

width = 100 %

Beachte, dass das je nach Version in html und css verschiedene Syntax hat.

Johann1234448

Beitragsersteller

18.07.2024, 16:30

Klappt leider auch nicht... Also das vorher klappte ja auch, aber nur nicht in den Chrome Entwickler Tools. Aber trotzdem danke für die Antwort

Mauritan

18.07.2024, 16:34

@Johann1234448

Leider finde ich meine alten Links nicht, doch google findet sicher:

Es gibt Seiten, die das Layout darstellen, je nachdem von welchem Medium es dargestellt wird. Etwa in Firefox, in Opera, auf dem Handy, unter Android...

Google dazu nach Webmastertools und Design etc.

Vielleicht geht es nicht, aber wahrscheinlich schon. Den Unterschied macht zuweilen ein ":" statt eines "=", ein Leerzeichen uvam.

HoiZusammen

18.07.2024, 16:34

Könnte es sein das du deinem Body ein display: flex verpasst hast?

Ähnliche Beiträge

CSS: Wie kann man einen Rahmen mit Abstand machen?

Also so ein border: solid 5px black; aber er soll so mit 15px um die div Box herum entstehen und nicht direkt angrenzend einen Rahmen bilden. Wisst ihr was ich meine? Also so als würde man ein Wort einkreisen z.B.

...zum Beitrag

Wie geht das mit CSS?

Ich kann deswegen nicht einfach ein größeres Div mit Border rundherum machen, weil ich will, dass dieser Border aktiv wird wenn man z.B. drüber hovert oder auf einen Knopf klickt. Es gibt viele Knöpfe. Und der Knopf auf den man sich gerade konzentriert, der soll halt einen Border bekommen -> aber mit viel Abstand. Margin und Padding habe ich beides ausprobiert, bewirkt nicht was ich wollte.

...zum Beitrag

Schnell Geld mit Html und Css?

Hallo ich habe gute Html und css kenntnisse ich muss schnell an geld kommen was würdet ihr mir empfehlen ich rede nicht von tausenden euros sondern ein bisschen

...zum Beitrag

Wann kann man JavaScript gut?

Also, ich kann von APIs Daten abrufen. Voice Recorder, Wetter Webseite etc.

Slideshows kann ich auch programmieren. Ist auch einfach. Node.js kann ich nicht und json habe ich noch nicht ganz verstanden.

HTML und CSS beherrsche ich richtig gut.

Wann würdet ihr sagen, dass man gut JavaScript Code schreiben kann?

...zum Beitrag

Wird HTMX JavaScript nutzlos machen?

...zum Beitrag

HTML Seite zentrieren und Seitenränder einstellen?

Hallo, ich habe meine Startseite zentriert und will auch, dass die Seite wie bei den meisten Webseiten in der Mitte platziert ist und nicht auf der ganzen Seite, also wie z.B. hier:

Könnt ihr mir helfen, welchen Befehl ich dafür verwenden muss?

Wenn ich das Fenster verkleinere oder im Handy aufrufe, sollte die sich dann anpassen.

Danke im Voraus.

...zum Beitrag

Welche WYSWYG Editioren sind empfehlenswert?

Suche einen guten und einfachen WYSWYG Editor für HTML, CSS, PHP, JavaScript.

Habe früher Webocton Scriptly genommen, das ist aber auch schon in die Jahre gekommen (neueste Version von 2010). Daher suche ich einen schönen einfachen WYSWIG Editor mit Syntax Highlighting und Autocompletion. Visual Studio Code ist nicht so mein Fall dafür. Vielleicht hat jemand ein paar Empfehlungen für mich.

Gerne für Windows/Linux/MacOS

...zum Beitrag

Erstellte website nicht aufrufbar?

Bin Anfänger im Thema Webseiten und programmieren und habe mir mal ein Tutorial angeschaut. In dem wurde mir erzählt, dass ich mit dem Editor und HTML eine Website erstellen kann. Wenn ich aber nach abspeichern des Editors etc. den Link, der in der Suchtleiste bei Chrome steht bei einem anderen Gerät eingebe, finde ich diese Seite nicht. Ich hatte auch nicht erwartet, dass das erstellen von einer Website auf diese Weise funktioniert, aber was fehlt mir, dass diese Seite, auch wenn es nur eine Testseite sein soll im Internet aufrufbar ist?

...zum Beitrag

Nav bar farb wechsel?

Hi ich möchte gerne das meine navbar die farbe wechselt wenn ich scrolle, was ich auch geschafft habe aber ich möchte gerne das sie erst die farbe wechselt wenn ich bis zu einer bestimmten höhe scrolle, also nicht direkt wenn ich anfange zu scrollen. Was muss ich da tun? :))) Hoffe man versteht was ich meine

<script>
 document.addEventListener('scroll',() => {
    const header =document.querySelector('header');
    
      if (window.scrollY >4) {
      header.classList.add('scrolled');
    } else {
      header.classList.remove('scrolled');
    }
  })
</script>

...zum Beitrag

HTML/CSS relative Pfade mit / beginnen oder nicht?

Hallo,was ist der Unterschied zwischen :

<link rel="stylesheet" href="css/style.css">

und

<link rel="stylesheet" href="/css/style.css">

Wie binde ich binde ich denn Dateien ein, welche auf der selben Ebene liegen? Beginne ich mit / oder nicht?

...zum Beitrag

Python mit HTML verbinden?

Hallo,

ich habe eine HTML- Datei und eine Python- Datei, welche ich mit Flask verbinden möchte. Mein Ziel ist es, dass wenn ich das Wort „Luna“ sage, ein div in der HTML- Datei eingefügt wird, doch bei mir funktioniert das nicht. Kann mir jemand erklären, wie ich die zwei Codes verbinden kann?

Freundliche Grüsse

...zum Beitrag

wieso PHP Parse error: syntax error, unexpected token ";" in /home/emmanuel/Downloads/hp.php on line 11?

<link rel="stylesheet" href="style.css">
<?php
$db = unserialize(file_get_contents('data.php'));
if($db == false){
        $db = array();
}
if($_POST['mail'] == ''){
        if($_POST['name'] == ''){
                if($_POST['pass'] == ''){a
                        if(!array_key_exists($_POST['mail'], $db){
                                $db[$_POST['mail']] = [$_POST['name'], []];
                                file_put_contents('data.php', serialize($db));
                        } 
                }
        }
}
?>
<form action="" method="post">
    <center>
        <label for="firma_name" >name:</label><br>
        <input type="text" class="input" name="name" autocomplete="off"><br>
        <label for="produkte">email:</label><br>
        <input type="text"  class="input" name="mail" autocomplete="off"><br>
        <label for="adresse">pass:</label><br>
        <input type="text"  class="input" name="pass" autocomplete="off"><br>
        <input type="submit" class="anmelde_button" value="anmelden">
    </center>
</form>

wieso PHP Parse error: syntax error, unexpected token ";" in /home/emmanuel/Downloads/hp.php on line 11?

...zum Beitrag

wass Macht Dieser Code?

<!DOCTYPE html> <html> <head> <title>Zufällige Geschichte und Bananen-Animation</title> <style> .story { font-size: 20px; margin-bottom: 20px; } .banana { width: 100px; height: 200px; position: absolute; bottom: 0; left: 0; animation: eatCars 5s infinite linear; } .car { width: 50px; height: 30px; position: absolute; bottom: 0; animation: moveCar 5s infinite linear; } @keyframes eatCars { 0% { left: 0; } 100% { left: 100%; } } @keyframes moveCar { 0% { left: 0; } 100% { left: -50px; } } </style> </head> <body> <button onclick="getRandomStory()">Zufällige Geschichte</button> <button onclick="startBananaAnimation()">Banane füttern</button> <div class="story"></div> <div class="banana"></div> <div class="car"></div> <div class="car"></div> <div class="car"></div> <script> const stories = [ "Es war einmal...", "In einer weit entfernten Galaxie...", "Ein kleines Mädchen fand...", ]; function getRandomStory() { const storyElement = document.querySelector('.story'); const randomIndex = Math.floor(Math.random() * stories.length); storyElement.textContent = stories[randomIndex]; } function startBananaAnimation() { const banana = document.querySelector('.banana'); banana.style.display = 'block'; } </script> </body> </html>

...zum Beitrag

Custom CSS Wordpress einzelne Seiten ausschließen?

Hallo, wie kann ich das Wordpress CSS nur für einzelne Seiten einstellen. Hab schon bisschen was zusammengebastelt. Danke für eure Hilfe!

@media only screen and (max-width: 359px) {

#primary .content-container {

padding-left: 10px !important;

padding-right: 10px !important;

}

{display:none}

.postid-3701,

.postid-3712,

.postid-3731,