Mobil tasarımda div içerisindeki öğeler kayıyor, nasıl düzeltebilirim?

HTML
1

Arkadaşlar esenlikler. Görsellerde eklediğim şekilde mobilde sayfa bağlantılarım kayıyor. Bunları görünür nasıl yapabilirim? Altlı üstlü de olsa olur.

3d869aa9-ec3b-4d0f-ba04-8a62bff914e1
3d869aa9-ec3b-4d0f-ba04-8a62bff914e11600×900 44.1 KB

d4601f30-ad56-444f-8841-f4ad8674845e
d4601f30-ad56-444f-8841-f4ad8674845e627×987 27.9 KB 

<!DOCTYPE html>
<html lang="tr">
    <head>
        <title> Ana Sayfa</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/style.css" rel="stylesheet">
        <style>
            #navbar{
                display: flex;
                flex-direction: row;
                background-color: #ffffff;
                overflow: hidden;
                justify-content: space-between;
                border-radius: 15px;
                box-shadow: 5px 5px 5px 5px #888888;
                border: 3px solid;
                border-color: rgb(0, 0, 0);
                width: 100%;
            }
            .NavBarA{
                margin-right: 10%;
                text-decoration: none;
                font-size: 32px;
            }

        </style>
    </head>
    <body style="background-color:rgb(255, 255, 255) ;">
        <div id="navbar">
            <a href="https://www.sahanhasret.dev/" style="margin-left:10px;">
                <img alt="Ana Sayfa" src="Assets/LOGO.gif"
                    width="150" height="150" style="margin-left: 20px;">
            </a>
            <div style="display:flex; flex-direction: row;justify-content: center;margin-right: 20%; margin-left: 20%; margin-top: 60px; ">
                <a class=NavBarA href="">Blog</a>
                <a class=NavBarA href="">Hakkımda</a>
                <a class=NavBarA href="">İletişim</a>
                <a style=" font-size: 32px;text-decoration: none;" href="">Projeler</a>
            </div>
        </div>
        <div style="background-color:black ; height:300px; width: 100%; border-radius: 15px; ">
            <p>Deneme</p>
        </div>
    </body>
</html>
2

Bir çok yöntem vardır.

css - Font scaling based on width of container - Stack Overflow

<!DOCTYPE html>
<html lang="tr">
    <head>
        <title> Ana Sayfa</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/style.css" rel="stylesheet">
        <style>
            #navbar{
                display: flex;
                flex-direction: row;
                background-color: #ffffff;
                overflow: hidden;
                justify-content: space-between;
                border-radius: 15px;
                box-shadow: 5px 5px 5px 5px #888888;
                border: 3px solid;
                border-color: rgb(0, 0, 0);
                width: 100%;
            }
            .NavBarA{
                margin-right: 10%;
                text-decoration: none;
                font-size: 4vw;
            }

        </style>
    </head>
    <body style="background-color:rgb(255, 255, 255) ;">
        <div id="navbar">
            <a href="https://www.sahanhasret.dev/" style="margin-left:10px;">
                <img alt="Ana Sayfa" src="Assets/LOGO.gif"
                    width="150" height="150" style="margin-left: 20px;">
            </a>
            <div style="display:flex; flex-direction: row;justify-content: center;margin-right: auto; margin-left: auto; margin-top: 60px; ">
                <a class=NavBarA href="">Blog</a>
                <a class=NavBarA href="">Hakkımda</a>
                <a class=NavBarA href="">İletişim</a>
                <a class=NavBarA href="">Projeler</a>
            </div>
        </div>
        <div style="background-color:black ; height:300px; width: 100%; border-radius: 15px; ">
            <p>Deneme</p>
        </div>
    </body>
</html>

Fontu ölçekledim. wrap seçenenkleri ile menü fontu sabit tutuluyo aşağı kaydıracak metodlar da vardır.

Ama kodun içinde en basiti fontu pencereye ölçeklemekti.

1 Beğeni
3

Responsive tasarımın ne olduğunu araştırman lazım. Böylece bu konu hakkında daha çok bilgi sahibi olabilirsin.