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

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

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

max-width: 100%; 
overflow: hidden; 

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

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

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

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

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

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

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

style.css

index.html

بتاريخ 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 لجعل التصميم أكثر إستجابة على شاشات أصغر حجماً