كيفية تحسين ظهور الأيقونات

أولا المشكلة الرئيسية في ملف index.css سطر 231 و 232 حيث تستخدم grid مما يجعل الحاوية الخاصة بالأيقونات كبيرة جدا لهذا يجب حذف هذين السطرين .

وأيضا يجب تقليل ال gap وهي المسافة بين العناصر بعد سطر 228 مباشرة هكذا :

.skills {
  flex-wrap: wrap;
  gap: 1rem;
}

وأيضا يجب وضع هذا الكود لجعل النص في صف بمفرده والأيقونات بمفردها في الشاشات الصغيرة :

@media(max-width: 778px){
  .skills .content{
    width: 100%;
  }
}

وهذا هو الملف بعد التعديل.

index.css

الأيقونات في قسم "Skills" تظهر بشكل غير مرتب عند عرض الموقع على شاشة هاتف (أقل من 900 بكسل) بسبب طريقة تعريف الـ CSS في الـ media query. في الكود الحالي، يتم تحويل الأيقونات إلى شبكة (grid) باستخدام

grid-template-columns: repeat(4, 1fr)

لكن هذا قد يؤدي إلى توزيع غير متناسق على شاشات صغيرة. لتحسين الترتيب، يمكنك تعديل الـ CSS كالتالي:

@media(max-width: 900px){
    .skills .icon {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* تقليل الأعمدة إلى 2 */
        gap: 10px; /* إضافة مسافة بين الأيقونات */
        text-align: center;
    }
}