HTML5, CSS, PHP | Inhalt ist viel zu klein | Zoom funktioniert nicht richtig?
Hallo,
ich habe ein Problem mit meiner HTML Seite. Ich muss für die Schule eine kleine Login Website erstellen. Mein Problem die Website schaut auf 250% so aus, wie ich sie haben möchte... Jedoch meine Lehrerin wird sich diese auf 100% anschauen... 😂 Hat irgendwer eine Ahnung, wie man das außer mit dem Zoom "Befehl" in CSS standartmäßig auf 250% festlegen kann? Würde mich riesig freuen, falls mir wer weiterhelfen könnte.
LG
3 Antworten
Dann mach die Elemente einfach grösser. Den Zoom irgendwie festlegen zu wollen ist eine ganz schlechte Idee.
Text mit font-size und andere Elemente mit width bzw. height.
Du sollst nicht zoomen, Du sollst den Elementen per CSS eine sinnvolle Größe geben.
Zeig mal deinen Code.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="login.css">
<title>Login Seite</title>
</head>
<body>
<br/>
<br/>
<h1> Login: </h1>
<div class="wrapper">
<form class="form-signin">
<h2 class="form-signin-heading">Please login</h2>
<input type="text" class="form-control" name="username" placeholder="Email Address" required="" autofocus="" />
<input type="password" class="form-control" name="password" placeholder="Password" required=""/>
<label class="checkbox">
<input type="checkbox" value="remember-me" id="rememberMe" name="rememberMe"> Remember me
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
</form>
</div>
</body>
</html>
CSS:
@import "bourbon";
body {
background: #eee !important;
}
.wrapper {
margin-top: 80px;
margin-bottom: 80px;
}
.form-signin {
max-width: 380px;
padding: 15px 35px 45px;
margin: 0 auto;
background-color: #fff;
border: 1px solid rgba(0,0,0,0.1);
.form-signin-heading,
.checkbox {
margin-bottom: 30px;
}
.checkbox {
font-weight: normal;
}
.form-control {
position: relative;
font-size: 16px;
height: auto;
padding: 10px;
@include box-sizing(border-box);
&:focus {
z-index: 2;
}
}
input[type="text"] {
margin-bottom: -1px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
input[type="password"] {
margin-bottom: 20px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
Vergrößere einfach die Werte für die font-size, und bei Bedarf für die Größe der Elemente.
Warum solltest du das so lösen? Ist dir unter normaler Zoomstufe des Browsers zu klein? Dann style die Elemente größer, anstatt tricksen zu wollen.
Hallo, danke erstmals für die Antwort. Wie kann ich die Elemente größer machen? LG