تعديل في تنسيق عناصر html في الشاشات الصغيرة

تحدث المشكلة بسبب إختلاف عرض كل جزئية (about us - help us ... إلخ) لذلك يمكنك أن تقوم بعمل min-width بنسبة 50% لكي تحصل كل القائم على نفس العرض، وبالتالي تظهر بشكل مناسب أسفل بعضها البعض.

.item {
	min-width: 50%
}

يمكنك أن تقوم بتطبيق الكود السابق في الشاشات الصغيرة فقط لكي لا تأثر على الشاشات الكبيرة التي تعمل بشكل جيد بالفعل.

المشكلة في هذا العنصر 

<li><a href="#">Corporate giving</a></li>

بسبب طول الجملة help us تنزاح الى الشمال, ما الحل؟ سوف أقدم لك بعض النصائح ويمكنك اتباعها في حل المشكلة, يمكنك تحديد عرض معين لعنصر ul الموجود في عنصر item, بعد اعطائه عرض مناسب له سوف تلاحظ أن القوائم بدأت تظهر بشكل أفضل, بقي أن نبعدها عن بعضها, كيف نبعدها؟ نحن قمنا باعطاء العنصر footer-nav خاصية 

    justify-content: space-between;

اذا من المفترض أن تبتعد القوائم عن بعضها, ولكن لم تبتعد بالقدر الكافي لماذا حصل ذلك؟ لأن العنصر footer-nav لا يأخذ العرض بالكامل, اذا الحل أن نعطيه العرض الكامل , لقد أعطيتك بعض النصائح , حاول العمل بها
 

الشكر جزيل الشكر للاستاذ سامح و الاستاذ محمد على الحلول الرائعة ولكن الحل الامثل ( من وجهة نظري ) يكمن في تحديد عرض ثابت للعمود help us والعمود about us

اهلا وسهلا ، شكرا لكم على تفاعلكم معي ، لكن جربت كل الطرق المذكوره ولكن لم يجدي لم تظهر النتيجه المرغوبه

وبالمنااسبه لا اتسطيع ان اغير او اضيف كلاسات في ملف ال html لذالك واحهت صعوبة في تحديد العناصر ، وشكرا لكم

بتاريخ 3 ساعات قال عبدالله غازي:

اهلا وسهلا ، شكرا لكم على تفاعلكم معي ، لكن جربت كل الطرق المذكوره ولكن لم يجدي لم تظهر النتيجه المرغوبه

وبالمنااسبه لا اتسطيع ان اغير او اضيف كلاسات في ملف ال html لذالك واحهت صعوبة في تحديد العناصر ، وشكرا لكم

لا نريد اضافة أي كلاس ولا نريد تغيير أي كلاس, لن نغير اي شيء في عناصر html, ما سنقوم به فقط اضافة القليل من التنسيقات لعنصر ul الموجود بداخل العنصر div الذي لديه الكلاس item, نحتاج أن نحدد له عرض ثابت في الشاشات الصغيرة ,في الشاشات الصغيرة سوف نعطيه هذا التنسيق

.item ul{
        width: 112px;
    }

وسوف تحل المشكلة
 

بتاريخ 12 ساعات قال محمد أبو عواد:

لا نريد اضافة أي كلاس ولا نريد تغيير أي كلاس, لن نغير اي شيء في عناصر html, ما سنقوم به فقط اضافة القليل من التنسيقات لعنصر ul الموجود بداخل العنصر div الذي لديه الكلاس item, نحتاج أن نحدد له عرض ثابت في الشاشات الصغيرة ,في الشاشات الصغيرة سوف نعطيه هذا التنسيق

.item ul{
        width: 112px;
    }

وسوف تحل المشكلة
 

نعم صحيح حلت المشكله ، شكرا جزيل لك جزاك الله الجنه