ما سبب الأخطاء في تجاوبية الموقع

عند التصغير لمقاس 462px تبدأ المشاكل في الظهور، حيث يظهر شريط تمرير بالأسفل بالتالي هناك مشكلة في التجاوبية، ستحتاج إلى حذف الـ padding الخاص بتنسيق كلاس contatiner في ملف index.css

@media screen and (max-width: 462px) {
  .container {
    padding: 0;
  }
}

وعند التصغير أكثر لا يتجاوب الموقع بشكل سليم،  والمشكلة في الجزء الخاص بالخدمات services حيث قمت بتحديد عرض وطول ثابت للعناصر داخل الـ grid بالتالي تصبح غير متجاوبة، يجب جعلها مرنة.

في البداية إنشاء grid متجاوب كالتالي في src\Components\Services\services.css :

.services .services-cards {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
}

@media (min-width: 300px) {
  .services .services-cards {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

وحذف أي كود خاص بإنشاء الـ grid في باقي الملف.

ثم حذف أي كود خاص بتعديل العرض width والطول للعناصر بداخل الـ grid.

ونفس الحال في ملف gym.css  لكن ستحتاج إلى استخدام flexbox فالتصميم هنا لا يناسبه الـ grid.

الأسهل لك الإعتماد أكثر على الـ flexbox واستخدام grid عند الحاجة، وكذلك بالنسبة للصور يجب استخدام max-width: 100% لتصبح متجاوبة وليس تعيين قيمة ثابتة لها، بل القيمة الخاصة بالعرض تكون للعنصر الأب الذي يحتويها.

نفس الحال بالنسبة للقسم للتالي:

.features .content-features {
    max-width: 500px;
}

أرفقت لك المشروع بعد التعديل.

alshahba-gym.zip