Değişik bir uyum sorunu çözemedim.

04-10-2019, 16:20:49

Arkadaşlar chrome üzerinde online denediğimde kodlar gayet sağlıklı çalışıyor ancak not defterinde açıp sonra çalıştırdığımda ise chrome üzerinde yazılar mobil uyumsuz oluyor ve saçma sapan şekil oluyor. bu sorun neden kaynaklı olabilir kodları bırakıyorum.

<!DOCTYPE html>
<html>
<head>
<title>Tour Booking Form</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<style>
html, body {
min-height: 100%;
}
body, div, form, input, select, textarea, p {
padding: 0;
margin: 0;
outline: none;
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
color: #666;
line-height: 22px;
}
h1 {
position: absolute;
margin: 0;
line-height: 50px;
font-size: 60px;
color: #fff;
z-index: 2;
}
.testbox {
display: flex;
justify-content: center;
align-items: center;
height: inherit;
padding: 20px;
}
form {
width: 100%;
padding: 20px;
border-radius: 6px;
background: #fff;
box-shadow: 0 0 15px 0 #3263cd;
}
.banner {
position: relative;
height: 260px;
background-image: url("/uploads/media/default/0001/02/de5d4fa9c24ed631b1c5d3f3bff8c0d5f3f4f325.png");
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.banner::after {
content: "";
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
width: 100%;
height: 100%;
}
input, select, textarea {
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
input {
width: calc(100% - 10px);
padding: 5px;
}
input[type="date"] {
padding: 4px 5px;
}
select {
width: 100%;
padding: 7px 0;
background: transparent;
}
textarea {
width: calc(100% - 12px);
padding: 5px;
}
.item:hover p, .item:hover i, .question:hover p, .question label:hover, input:hover::placeholder {
color: #3263cd;
}
.item input:hover, .item select:hover, .item textarea:hover {
border: 1px solid transparent;
box-shadow: 0 0 5px 0 #3263cd;
color: #3263cd;
}
.item {
position: relative;
margin: 10px 0;
}
input[type="date"]::-webkit-inner-spin-button {
display: none;
}
.item i, input[type="date"]::-webkit-calendar-picker-indicator {
position: absolute;
font-size: 20px;
color: #a9a9a9;
}
.item i {
right: 2%;
top: 28px;
z-index: 1;
}
[type="date"]::-webkit-calendar-picker-indicator {
right: 1%;
z-index: 2;
opacity: 0;
cursor: pointer;
}
input[type=radio], input[type=checkbox] {
display: none;
}
label.radio, label.checkbox {
position: relative;
display: inline-block;
margin: 5px 20px 15px 0;
cursor: pointer;
}
.question span {
margin-left: 30px;
}
label.radio:before, label.checkbox:before{
content: "";
position: absolute;
left: 0;
width: 17px;
height: 17px;
border-radius: 50%;
border: 2px solid #ccc;
}
label.checkbox:before{ border-radius: 5px}
input[type=radio]:checked + label:before, label.radio:hover:before,
input[type=checkbox]:checked + label:before, label.chekbox:hover:before {
border: 2px solid #3263cd;
}
label.radio:after, label.checkbox:after {
content: "";
position: absolute;
top: 6px;
left: 5px;
width: 8px;
height: 4px;
border: 3px solid #3263cd;
border-top: none;
border-right: none;
transform: rotate(-45deg);
opacity: 0;
}
input[type=radio]:checked + label:after, input[type=checkbox]:checked + label:after {
opacity: 1;
}
.btn-block {
margin-top: 10px;
text-align: center;
}
button {
width: 150px;
padding: 10px;
border: none;
border-radius: 5px;
background: #3263cd;
font-size: 16px;
color: #fff;
cursor: pointer;
}
button:hover {
background: #5b82d7;
}
@media (min-width: 568px) {
.name-item, {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.name-item input, {
width: calc(50% - 20px);
}
}
</style>
</head>
<body>
<div class="testbox">
<form action="/">
<div class="banner">
<h1>Tour Booking Form</h1>
</div>
<div class="item">
<p>Name</p>
<div class="name-item">
<input type="text" name="name" placeholder="First" />
<input type="text" name="name" placeholder="Last" />
</div>
</div>
<div class="item">
<p>Email</p>
<input type="email" name="email"/>
</div>
<div class="item">
<p>Phone</p>
<input type="text" name="phone" placeholder="### ### ####"/>
</div>
<div class="item">
<p>When are you planning to visit?</p>
<input type="date" name="bdate" required/>
<i class="fas fa-calendar-alt"></i>
</div>
<div class="item">
<p>How many people are in your group?</p>
<input type="text" name="language"/>
</div>
<div class="item">
<p>Which tours or events are you most interested in?</p>
<input type="text" name="language"/>
</div>
<div class="question">
<p>What is the best way to contact you?</p>
<div class="question-answer">
<div>
<input type="checkbox" value="none" id="checkbox_1" name="contact1"/>
<label for="checkbox_1" class="checkbox"><span>Phone</span></label>
</div>
<div>
<input type="checkbox" value="none" id="checkbox_2" name="contact2"/>
<label for="checkbox_2" class="checkbox"><span>Email</span></label>
</div>
<div>
<input type="checkbox" value="none" id="checkbox_3" name="contact3"/>
<label for="checkbox_3" class="checkbox"><span>Either</span></label>
</div>
</div>
</div>
<div class="question">
<p>If phone, when is the best time of day for a call-back?</p>
<div class="question-answer">
<div>
<input type="radio" value="none" id="radio_4" name="time"/>
<label for="radio_4" class="radio"><span>8-11 AM</span></label>
</div>
<div>
<input type="radio" value="none" id="radio_5" name="time"/>
<label for="radio_5" class="radio"><span>12-4 PM</span></label>
</div>
<div>
<input type="radio" value="none" id="radio_6" name="time"/>
<label for="radio_6" class="radio"><span>6-10 PM</span></label>
</div>
</div>
</div>
<div class="item">
<p>Anything else we should know?</p>
<textarea rows="3"></textarea>
</div>
<div class="item">
<p>And last, how did you hear about us?</p>
<textarea rows="3"></textarea>
</div>
<div class="btn-block">
<button type="submit" href="/">Send</button>
</div>
</form>
</div>
</body>
</html>

04-10-2019, 16:24:19

#2

Leonardo

notepad yerine notepad++ kullanın utf8 bomsuz kayıt et gibi seçenek vardır onu kullanmanız lazım. Ayrıca meta charset etiketinizde eksik.

04-10-2019, 16:30:46

#3

wesika

Leonardo adlı üyeden alıntı: mesajı görüntüle

notepad yerine notepad++ kullanın utf8 bomsuz kayıt et gibi seçenek vardır onu kullanmanız lazım. Ayrıca meta charset etiketinizde eksik.

bomsuz yok bom olarak kaydet var birde utf8 olarak var ikisinide denedim olmuyor

04-10-2019, 16:36:42

#4

Leonardo

wesika adlı üyeden alıntı: mesajı görüntüle

bomsuz yok bom olarak kaydet var birde utf8 olarak var ikisinide denedim olmuyor

Birde Kodlama>bom olmadan utf8 olarak kodlayı seçip deneyin.

04-10-2019, 16:42:23

#5

wesika

Leonardo adlı üyeden alıntı: mesajı görüntüle

Birde Kodlama>bom olmadan utf8 olarak kodlayı seçip deneyin.

öyle bir seçenek yokayarlardan baktığımda utf 8 otomatik bomsuz olarak kaydediliyor

Leonardo adlı üyeden alıntı: mesajı görüntüle

Birde Kodlama>bom olmadan utf8 olarak kodlayı seçip deneyin.

olaya bakar şimdi online editörde açıyorummobil çalışıyor ancak onda bile saf olarak açtığında aynı sorun oluşuyor .ss neyden kaynaklı acaba

edgeden destekliyor aslında ama nedense googleden ve telefondan desteklemiyor sadece site önizleme sayfalarından izlenebiliyor

Bu djuruma ne diyorsunuz arkadaşlar bileniniz vardır illaki

04-10-2019, 17:35:15

#6

ademgao

title altına şu kodları ekleyin hocam,
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

04-10-2019, 18:02:08

#7

wesika

ademgao adlı üyeden alıntı: mesajı görüntüle

title altına şu kodları ekleyin hocam,
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Abi süpersin ya gerçekten oldu şaşırdım

04-10-2019, 18:21:11

#8

ademgao

Kodların ne işe yaradığını araştırın bilginiz pekişsin.