Hallo, mein checkbox funktioniert auf dem Laptop, doch auf dem Handy verrutscht checkbox auch der Text, der dazu gehört. Ich habe soviele @media s eingesetzt
und versucht so für jedes Handy passend zu machen, doch es klappt nicht. Gibt es eine Methode wo das einfacher geht?
Vielen Dank und Lieben Gruß
Banu
<html>
<head>
<meta charset="UTF-8" />
<meta name="yandex-verification" content="36f5a5c926d2c5aa" >
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="ie=edge" >
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="icon.png">
<title>BT Immobilien</title>
<link rel="icon" type="image/png" href="../bilder/icon.png">
<link rel="stylesheet" href="../style.css">
</head>
.
.
.
<form>
<p id="privacy" albin="block">
<input class="privacy_accept_checkbox5" type="checkbox" required name="Einverständnis_Speicherung_Daten?"value="ja" >
<label class="privacy_accept5" for="privacy_accept_checkbox5" >
<p> Ich bin damit einverstanden, dass mich Banu Torun Immobilien telefonisch oder per E-Mail kontaktiert
und meine angegebenen Daten speichert.(Ihre Daten werden vertraulich behandelt und nicht an Dritte weitergegeben.)
</p>
</label>
</form>
Style:
*{
margin: 0;
padding: 0;
}
/* bei nur height verschwindet der scrollbalken */
html{
min-height:100%;
height: 100%;
overflow-x: hidden;
/* overflow-y: scroll; */
position: relative;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
background-color:rgb(247, 244, 244);
}
body {
height: auto;
font-size: 100%;
overflow-x: hidden;
margin:0;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family:'Times New Roman', Times, serif;
display:flex;
flex-direction:column;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
min-height: 100%;
}
.
.
.
@media only screen and (min-width: 410px)and (max-width:449px){
.privacy_accept5{
float:left;
position: relative;
margin:0em -9em;
z-index: 0;
}
}
@media only screen and (min-width: 450px)and (max-width:500px){
.privacy_accept5{
width:80%;
float:left;
position: relative;
margin:-2em 39em;
padding:-2em 50em;
z-index: 0;
}
}
@media only screen and (min-width: 410px)and (max-width:420px){
.privacy_accept_checkbox5 {
float: left;
position: relative;
top:0em;
margin:2em 5em;
z-index: 0;
}
}
und versucht so für jedes Handy passend zu machen, doch es klappt nicht. Gibt es eine Methode wo das einfacher geht?
Vielen Dank und Lieben Gruß
Banu
<html>
<head>
<meta charset="UTF-8" />
<meta name="yandex-verification" content="36f5a5c926d2c5aa" >
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="ie=edge" >
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="icon.png">
<title>BT Immobilien</title>
<link rel="icon" type="image/png" href="../bilder/icon.png">
<link rel="stylesheet" href="../style.css">
</head>
.
.
.
<form>
<p id="privacy" albin="block">
<input class="privacy_accept_checkbox5" type="checkbox" required name="Einverständnis_Speicherung_Daten?"value="ja" >
<label class="privacy_accept5" for="privacy_accept_checkbox5" >
<p> Ich bin damit einverstanden, dass mich Banu Torun Immobilien telefonisch oder per E-Mail kontaktiert
und meine angegebenen Daten speichert.(Ihre Daten werden vertraulich behandelt und nicht an Dritte weitergegeben.)
</p>
</label>
</form>
Style:
*{
margin: 0;
padding: 0;
}
/* bei nur height verschwindet der scrollbalken */
html{
min-height:100%;
height: 100%;
overflow-x: hidden;
/* overflow-y: scroll; */
position: relative;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
background-color:rgb(247, 244, 244);
}
body {
height: auto;
font-size: 100%;
overflow-x: hidden;
margin:0;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family:'Times New Roman', Times, serif;
display:flex;
flex-direction:column;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
min-height: 100%;
}
.
.
.
@media only screen and (min-width: 410px)and (max-width:449px){
.privacy_accept5{
float:left;
position: relative;
margin:0em -9em;
z-index: 0;
}
}
@media only screen and (min-width: 450px)and (max-width:500px){
.privacy_accept5{
width:80%;
float:left;
position: relative;
margin:-2em 39em;
padding:-2em 50em;
z-index: 0;
}
}
@media only screen and (min-width: 410px)and (max-width:420px){
.privacy_accept_checkbox5 {
float: left;
position: relative;
top:0em;
margin:2em 5em;
z-index: 0;
}
}
