CSS: Text an Bildschirm anpassen? bearbeitet von Daniel H 03.10.2017 13:09 Hallo liebe SelfHTML-Community! Ich bin gerade dabei, die Registrierungsseite meiner Homepage anzufertigen. Nun stehe ich vor einem Problem beim Mobil-Verfügbar-machen. Und zwar soll sich die <h1>-Überschrift an den Bildschirm anpassen, da die Überschrift derzeit ohne zu zoomen kaum leserlich ist. Hier mein Code: HTML: ~~~PHP <!DOCTYPE html> <?php ?> <html> <head> <title>Registrieren!</title> <link rel="stylesheet" href="../css/main.css"/> <meta name="viewport" > </head> <body> <div id="outer-wrapper"> <div id="reg-wrapper"> <div id="headtext"> <h1>Register..</h1> </div> </div> </div> </body> </html> ~~~ CSS: ~~~CSS body { background-image: url('../res/images/regbg.jpg'); background-size: cover; } #outer-wrapper { background-color: rgba(255, 255, 255, 0.76); position: absolute; width: 50%; height: 100%; margin: 0; left: 25%; top: 0px; } #headtext { width: 100%; background-color: green; border-top: 1px solid black; border-bottom: 1px solid black; } @media only screen and (min-device-width : 320px) and (max-device-width : 568px) { body { background-size: auto; } #outer-wrapper { left: 0px; width: 100%; margin: 0; padding: 0; } ~~~
CSS: Text an Bildschirm anpassen? bearbeitet von Matthias Scharwies 03.10.2017 13:14 Hallo liebe SelfHTML-Community! Ich bin gerade dabei, die Registrierungsseite meiner Homepage anzufertigen. Nun stehe ich vor einem Problem beim Mobil-Verfügbar-machen. Und zwar soll sich die <h1>-Überschrift an den Bildschirm anpassen, da die Überschrift derzeit ohne zu zoomen kaum leserlich ist. Hier mein Code: HTML: `<!DOCTYPE html> <?php ?> <html> <head> <title>Registrieren!</title> <link rel="stylesheet" href="../css/main.css"/> <meta name="viewport" > </head> <body> <div id="outer-wrapper"> <div id="reg-wrapper"> <div id="headtext"> <h1>Register..</h1> </div> </div> </div> </body> </html>` CSS: `body { background-image: url('../res/images/regbg.jpg'); background-size: cover; } #outer-wrapper { background-color: rgba(255, 255, 255, 0.76); position: absolute; width: 50%; height: 100%; margin: 0; left: 25%; top: 0px; } #headtext { width: 100%; background-color: green; border-top: 1px solid black; border-bottom: 1px solid black; } @media only screen and (min-device-width : 320px) and (max-device-width : 568px) { body { background-size: auto; } #outer-wrapper { left: 0px; width: 100%; margin: 0; padding: 0; }`
nicht angemeldet nicht angemeldet
