Hertürlü çözünürlüğe sığması için nasıl revize edebilirim?

11-10-2021, 14:39:51

Bazen telefonlarda bazende eski bilgisayarlarda birbirine giriyor resmin yarısı ekranın yukarısına girmiş gibi gibi.. Bu durumu nasil cozebilirm

<body>
    <form action="login_authenticate.php" method="post">
        <div class="login-box">
            <img src="loginLogo.jpg"  />
            <h1>Yetkili Giriş</h1>
 
            <div class="textbox">
                <i class="fa fa-user" aria-hidden="true"></i>
                <input type="text" placeholder="Kullanıcı Adı"
                         name="adminname" value="">
            </div>
 
            <div class="textbox">
                <i class="fa fa-lock" aria-hidden="true"></i>
                <input type="password" placeholder="Şifre"
                         name="password" value="">
            </div>
 
            <input class="button" type="submit"
                     name="login" value="Giriş Yap">
        </div>
        
    </form>

</body>

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background: url() no-repeat;
    background-size: cover;
}
 
.login-box {
    width: 480px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #191970;
}
 
.login-box h1 {
    text-align: center;
    font-size: 40px;
    border-bottom: 4px solid #191970;
    margin-bottom: 50px;
    padding: 13px;
}
 
.textbox {
    width: 100%;
    overflow: hidden;
    font-size: 20px;
    padding: 8px 0;
    margin: 8px 0;
    border-bottom: 1px solid #191970;
}
 
.fa {
    width: px;
    float: left;
    text-align: center;
}
 
.textbox input {
    border: none;
    outline: none;
    background: none;
    font-size: 18px;
    float: left;
    margin: 0 10px;
}
 
.button {
    width: 100%;
    padding: 8px;
    color: #ffffff;
    background: none #191970;
    border: none;
    border-radius: 6px;
    font-size: 18px;
    cursor: pointer;
    margin: 12px 0;
}

11-10-2021, 14:44:47

#2

tolgagunaydin

loginbox taki position absolute 'den kaynaklanıyor olabilir hocam. Burayı relative yapın ama bu seferde login ekranınızın konumu değişecektir. Aslında absolute'deki kodlar doğru yazılmış. Bozuk bir görüntü atarsanız eğer daha çok yardımcı olabilirim.

11-10-2021, 14:46:44

#3

Cooper34

Farklı çözüm yolları var ama mobil ve eski bilgisayarlara göre @media tagıyla piksel sınırına kadar css'leri gösterebilirsin. Örneğin aşağıda .test adlı class için min-width değerinin üzeri için display:none; dedik. Yani min-width değeri ve daha büyük değerler için o class'ı göstermeyecek.

Max-width değeri için ise o değer ve altındaki tüm değerler için test class'ını gösterecek. Sen yalnızca mobil için atıyorum max-width: 480px diyerek 480px genişliğe kadar olan tüm cihazlarda ilgili css sınıfını gösterebilirsin.

Örneğin

@media screen and (min-width: 768px)
{
.test {display:none;}
}

@media screen and (max-width: 767px)
{
.test {display:block;}
}

11-10-2021, 14:47:35

#4

SecurityWorker

Tek değişecek yer ;

.login-box {
    max-width: 480px;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #191970;
}

veya

@media screen etiketlerini kullanabilirsiniz.

11-10-2021, 14:51:19

#5

BoogeymaN

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

Tek değişecek yer ;

.login-box {
    max-width: 480px;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #191970;
}

veya

@media screen etiketlerini kullanabilirsiniz.

hocam bu sekilde cozuldu teşekkür ediyorum

11-10-2021, 14:52:00

#6

SecurityWorker

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

hocam bu sekilde cozuldu teşekkür ediyorum

Borcunuz 5 TL