مشكلة في الـ responsive والموقع غير متناسب مع الشاشات الصغيرة

المشكلة في العنصر contact-content حيث اعطيته padding من اليمين واليسار بقيمة 600 بيكسل ولذلك فلن يكون متناسب مع جميع الشاشات ولاسيما الشاشات الاصغير من 600 بيكسل.

لحل المشكلة جرب تعديل الكود للشكل التالي :

.contact-content {
    display: flex;
    align-items: center;
    height: 300px;
    width: 200px;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
}

تنفيذك للمشروع رائع جداً ويظهر بشكل جميع ورائع . 

هناك ملاحظة في الصور ، طالما أن ملف HTML ليس بداخل مجلد فلسنا بحاجة وضع .. 

<img src="../images/a.jpg" alt="">

لذلك من أجل ظهور الصور نقوم بعمل التالي ، اي حذف /..

<img src="images/a.jpg" alt="">

وكذلك ينطبق الأمر في ملفات css 

<link rel="stylesheet" href="./css/style.css">
  <!-- normalize the css -->
  <link rel="stylesheet" href="./css/normalize.css">
  <!-- icon css -->
  <link rel="stylesheet" href="./css/all.min.css">

يجب تعديلها لتصبح 

<!-- main css file -->
  <link rel="stylesheet" href="css/style.css">
  <!-- normalize the css -->
  <link rel="stylesheet" href="css/normalize.css">
  <!-- icon css -->
  <link rel="stylesheet" href="css/all.min.css">

كما أنك تحتاج إلى إضافة مسافة بين أيقونات التواصل الإجتماعي في الفوتر أسفل الصفحة . 

كما أن الاكواد تظهر بشكل مرتب ومفهوم وفي حال أردنا التعديل عليها سوف نقوم بالتعديل بكل سهولة .

هناك ملاحظتين بجانب التعليقات السابقة 

الأولى : يجب تسمية ملف ال html الرئيسي ل index.html هي أنه يعتبر الملف الرئيسي للموقع أو المجلد الذي يحتويه. عندما يطلب المستخدم عنوان موقع دون تحديد ملف معين، فإن المتصفح يبحث عن ملف index.html ويعرضه. لذا، يجب أن يحتوي هذا الملف على كود الصفحة الرئيسية للموقع أو رابط إلى ذلك.

الثانية : هو ترتيب رابط ملفات ال css حيث يجب عليك جعل رابط استدعاء ملف ال css الخاص بك بالآخر حيث إذا كانت هناك عدة تنسيقات متشابهه بين الملفات يتم تنفيذ التنسيقات الموجودة بالملف الخاص بك وبالتالي سيصبح الكود كما يلي

<!-- normalize the css -->
<link rel="stylesheet" href="css/normalize.css">
<!-- icon css -->
<link rel="stylesheet" href="css/all.min.css">
<!-- main css file -->
<link rel="stylesheet" href="css/style.css">