مشكلة في مشروع vue.js في الشاشات الصغيرة يظهر سكرول

سبب ظهور هذا الأمر يرجع إلى أن الـ navbar المساحة له في الشاشات الصغيرة لم تعد كافية للمحتوى لذلك في هذه الشاشات نقوم بجعل قائمة الروابط أسفل شعار الموقع لذلك في ملف components\GymNav.vue نقوم بتعديل ترتيب العناصر لتصبح عمودية لجعل قائمة الروابط أسفل شعار الموقع لتصبح الأكواد الخاص بالشاشة الصغيرة التي أقل من 768px كالتالي

@media(max-width: 778px){
    .logo{
        display: none;
    }
    .links{
        margin-left: 30px;
    }
    .navbar{
        flex-direction:column;
    }
}

أضفنا  ;flex-direction:column للعنصر الذي لديه الصنف navabar. لجعل إتجاه العناصر عموديا أي تحت بعضهم البعض حيث السلوك الافتراضي لـ ;display:flex هو جعل اتجاه ترتيب العناصر أفقيا أي بجانب بعضهم البعض لذلك قمنا بتعديله.