فحص تجاوبية الصفحة الاولى من الموقع الشخصي

عند فحص توافق الموقع مع مختلف أحجام الشاشات نقوم بذلك من خلال أدوات المطورين (inspect) ، وهي الطريقة الأولى التي في الصورة الأولى وبحيث تعتبر أدق من تصغير حجم المتصفح وتطعي نتائج أفضل لتوافق المواقع مع الشاشات وأيضاً ويوفر لك عدَة من أحجام حقيقية الشاشات الجوال والتابلت يمكنك استخدمها في فحص توافق الموقع  ، أما عن الإسم والقائمة في الصورة ألاحظ أنها تحت  بعضهما لكن مع اختلاف بسيط ، وأعتقد أنه ظهر مع المدرب بهذا الشكل أو يمكنك مراجعة رؤية شيفرة CSS ورؤية ماذا المختلف مع المدرب .

من خلال developer tools في المتصفح تجد مجموعة من أهم أحجام الشاشات (القياسية) للهواتف (mobiles) والحواسب اللوحية (tablets) الأكثر شيوعاً  في سوق العمل, كما تجد خياراً أخر يدعى responsive يمكنك من خلاله تغيير حجم الشاشة ومشاهدة التغيير الحاصل على التنسيق العام لتطبيق الويب الذي تعمل عليه وكلا الطريقتين صحيحتين ولكن الأمر يعتمد كثيراً على شريحة المستخدمين المستهدفة. مثلاً يعمد بعض أصحاب المشاريع الى صناعة تطبيق متجاوب responsive مع طيف معين من الأجهزة دون أخرى طبقاً للمنطقة الجغرافية التي يتواجد فيها المستخدم end user ونوع الأجهزة التي يستعملها وفق دراسات مسبقة. 

بالنسبة للمشكلة في navbar لديك يمكنك إستهداف نطاق الأحجام التي تظهر فيها مشكلة التنسيق من خلال عمل media query بسيطة لحل المشكلة وفق الرؤية التالية

@media only screen and (min-width: ?) and (max-width: ?) {
    //font-size يمكنك هنا تغيير حجم الخط  مثلا لمحتويات القائمة
    //للعنصر الحاوية لمحتويات القائمة display يمكنك إيضا تغيير طريقة العرض
}
// ? علامة الإستفهام تضع بمكانها مدى الحجم المستهدف