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

السؤال

Recommended Posts

  • 0
نشر

يبدو أن المشكلة تحدث لأن عرض القسم الذي يحتوي البطاقات "free shipping" اكبر من عرض الصفحة وبالتالي اصبح لديك scroller بالاتجاه العرضي.

لحل المشكلة اعطي الأب الخاص بالبطاقات الخاصيتين :

max-width: 100%; 
overflow: hidden; 

وهما تعنيان أن اقصى عرض للعنصر سيكون 100% من عرض الاب الخاص به وفي حالتك الاب هو الـ body وأن الابناء "البطاقات" سيختفون في حال كانوا يحتاجون مساحة اكبر من عرض الأب الحاوي للبطاقات.

أما بالنسبة لوجود مشاكل كثيرة فالموضوع طبيعي جداً وانت بحاجة لمحاولة حل المشكلة اكثر من مرة و البحث في الانترنت عن المشكلة التي تواجهها قبل ان تقوم بطرح السؤال.

في حال لم تذهب المشكلة رغم تطبيق الكود السابق فيمكنك تجريب الكود التالي :

*{
  max-width: 100%; 
  overflow: hidden; 
}

والذي يعطي الخصائص السابقة لكل العناصر.

في حال لم تحل المشكلة رغم كل ذلك قم بمشاركة ملفات المشروع.

  • 0
نشر
بتاريخ On 10/23/2022 at 17:02 قال Ziad Mohamed10:

طيب بعد محاولات طويلة قدرت اخليهم  جنب بعض بس معرفتش اخلي الكلام علي نفس السطر من غير ما يبوظ

 

style.css

index.html

لحل هذه المشكلة تستطيع زيادة عٌرض h6 ليحتوي النص بنفس السطر دون الحاجه للنزول الى السطر التالي ومن خلال إسناد القيمة المناسبة للخاصية width في CSS. لاحظ الإضافة التالية على الكود الخاص بك

...

#feature .fe-box h6 {
  display: inline-block;
  padding: 9px 8px 6px 8px;
  /* line-height: 1; */
  border-radius: 4px;
  color: #088178;
  background-color: #fddde4;

  /* هنا نجعل العنصر يأخذ أقصى عرض يحتوي النص الذي بداخله */
  width: max-content;
}

...
	

يمكنك أيضاً إسناد قيمة ثابتة لل width مثلاً 100px أو ما شابه ذلك للحصول على نفس النتيجة لكن قد تحتاج عندها الى العمل على media query لجعل التصميم أكثر إستجابة على شاشات أصغر حجماً

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...