اذهب إلى المحتوى
  • 0

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

عبدالله غازي

السؤال

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

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

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

 

project2.rar

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

Recommended Posts

  • 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 لذالك واحهت صعوبة في تحديد العناصر ، وشكرا لكم

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

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

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

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

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

.item ul{
        width: 112px;
    }

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

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

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

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


.item ul{
        width: 112px;
    }

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

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

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

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...