• 0

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

السلام عليكم ، لدي مشكلة لم استطع حلها انا شغال على موقع تجريبي للتدريب والحمدلله انهيته وجعلته responsive لجميع الشاشات ، ولكن لدي مشكله في الشاشات الصغيره جدا التي تكون شاشات الهاتف ، في ال footer المشكله هي انه نفس ما نشوف في الصوره 

60a9467071ad7_Screenshot(228).thumb.png.f0634439f5185a17fa30478714cbbcff.png

كل شي على ما يرام الا ال help us منزاح الي اليمين وانا اريده ان يكون تحت ال about us ولكن لم استطع فعلها ارجو المساعدة وشكرا 

 

project2.rar

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 1

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

.item {
	min-width: 50%
}

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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 1

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

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

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

    justify-content: space-between;

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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

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

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

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 3 ساعات قال عبدالله غازي:

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

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

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

.item ul{
        width: 112px;
    }

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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 12 ساعات قال محمد أبو عواد:

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


.item ul{
        width: 112px;
    }

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

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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن