nicht angemeldet
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;
}
Matthias Scharwies
Gunnar Bittersmann
Rolf B
MudGuard