Web sitesi nasıl daha güzel hale getirilir?

serhatcandev dedi:
İyi geceler. Tabii ki elimden geldiğince yardım ederim.
Genişletmek için tıkla...
Hocam sayfa küçülünce neden inputlar küçülmüyor?

Kod: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login</title>
<style type="text/css" media="screen">
form{
    margin: 0 auto;
    width: 100vh;
}
form input{
    display: block;
    padding: 10px 15px;
    border: 2px solid #2C3333;
    outline: none;
    transition: 1s;
}form input:focus{
    background-color:#E7B10A;
}


form div input,
form div label{
    margin: 10px;
    width: 100vh;
}button{
    margin: 10px;
    width: 75px;
    height: 30px;
    background-color: #EB455F;
    border: none;
    color: white;
}button:active{
    scale: 0.95;
}button[type="reset"]{
    background-color: #B4E4FF;
    color: black;
}
</style>
</head>
<body>
<main>

<form>

    
<div class="satir">
    <label>Name</label>
    <input id="name"class="box" type="text"placeholder="James etc." autocomplete="off">
</div>

<div class="satir">
    <label>Surname</label>
    <input class="box" type="text"placeholder="Holder etc." autocomplete="off">
</div>

<div class="satir">
    <label>User Name</label>
    <input class="box" type="text"placeholder="Leader24 etc." autocomplete="off">
</div>
<button type="submit">Kayıt Ol</button>
<button type="reset">Temizle</button>
</form>

</main>
</body>
</html>
 
ErrorCorrection dedi:
Hocam sayfa küçülünce neden inputlar küçülmüyor?

Kod: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login</title>
<style type="text/css" media="screen">
form{
    margin: 0 auto;
    width: 100vh;
}
form input{
    display: block;
    padding: 10px 15px;
    border: 2px solid #2C3333;
    outline: none;
    transition: 1s;
}form input:focus{
    background-color:#E7B10A;
}


form div input,
form div label{
    margin: 10px;
    width: 100vh;
}button{
    margin: 10px;
    width: 75px;
    height: 30px;
    background-color: #EB455F;
    border: none;
    color: white;
}button:active{
    scale: 0.95;
}button[type="reset"]{
    background-color: #B4E4FF;
    color: black;
}
</style>
</head>
<body>
<main>

<form>

   
<div class="satir">
    <label>Name</label>
    <input id="name"class="box" type="text"placeholder="James etc." autocomplete="off">
</div>

<div class="satir">
    <label>Surname</label>
    <input class="box" type="text"placeholder="Holder etc." autocomplete="off">
</div>

<div class="satir">
    <label>User Name</label>
    <input class="box" type="text"placeholder="Leader24 etc." autocomplete="off">
</div>
<button type="submit">Kayıt Ol</button>
<button type="reset">Temizle</button>
</form>

</main>
</body>
</html>
Genişletmek için tıkla...
Sabah bakayım şuan da kalktım bilgisayardan.

ErrorCorrection dedi:
Hocam sayfa küçülünce neden inputlar küçülmüyor?

Kod: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login</title>
<style type="text/css" media="screen">
form{
    margin: 0 auto;
    width: 100vh;
}
form input{
    display: block;
    padding: 10px 15px;
    border: 2px solid #2C3333;
    outline: none;
    transition: 1s;
}form input:focus{
    background-color:#E7B10A;
}


form div input,
form div label{
    margin: 10px;
    width: 100vh;
}button{
    margin: 10px;
    width: 75px;
    height: 30px;
    background-color: #EB455F;
    border: none;
    color: white;
}button:active{
    scale: 0.95;
}button[type="reset"]{
    background-color: #B4E4FF;
    color: black;
}
</style>
</head>
<body>
<main>

<form>

   
<div class="satir">
    <label>Name</label>
    <input id="name"class="box" type="text"placeholder="James etc." autocomplete="off">
</div>

<div class="satir">
    <label>Surname</label>
    <input class="box" type="text"placeholder="Holder etc." autocomplete="off">
</div>

<div class="satir">
    <label>User Name</label>
    <input class="box" type="text"placeholder="Leader24 etc." autocomplete="off">
</div>
<button type="submit">Kayıt Ol</button>
<button type="reset">Temizle</button>
</form>

</main>
</body>
</html>
Genişletmek için tıkla...
Çünkü genişliğini 100vw yapmışsın. % veya rem kullan.
 
Son düzenleme:

Benzer konular

6
Web sitesi nasıl mobil uyumlu hale getirilir?
Mesaj
7
Görüntüleme
618
Yeniçocuk
Yeniçocuk
533388
PHP  Kod nasıl daha güvenli hale getirilir?
Mesaj
2
Görüntüleme
92
533388
533388
M
  • Soru
Web sitesi mobil uygulama haline nasıl getirilir?
Mesaj
4
Görüntüleme
5B
bitwise
bitwise
Middle goes
  • Soru
Localhost'ta yapılan web site nasıl herkesin girebileceği hale getirilir?
2
Mesaj
15
Görüntüleme
341
VenomBey
VenomBey
LuisB4y
Web sitesi nasıl yapılır?
2
Mesaj
14
Görüntüleme
303
507587
5

Yeni konular

Yeni mesajlar

Geri
Yukarı