Checkbox Mobile Ansicht

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Coffee

Neues Mitglied
21 Januar 2021
1
0
1
43
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;
}
}
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.195
435
83
68
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?
Eine Vielzahl von Mediaqueries ist wahrscheinlich nicht der Weg, der zum Ziel führt. Sei zunächst Mal konsequent und verwende durchgängig Flexlayout statt float, dann beugst Du schon vielen Probleme vor. Die Frage ist, wie Du es haben möchtest? Die Checkbox und die Beschriftung nebeneinander? In dem Fall würde Flex schnell zum Ziel führen.
 
Werbung:

Neueste Beiträge