ازاي اخلي الموقع ده responsive

يبدو أنك أرفقت ملف التنسيق متكرر ولم تقوم بإرفاق ملف HTML لرؤية الموقع بشكل واضح ، لذلك قم بإرفاق شيفرة HTML الخاصة بالموقع . 

textt.html

بعد الإطلاع على الكود الخاص بك لابد لنا من توضيح بعض الأمور لك لتجنب تكرارها في المستقبل. من السيء جداً أن تعرف إسم صنف في حاوية معينة ثم تقوم بتعريف صنف أخر بنفس الإسم في حاوية اخرى حيث يسبب هذا إرباك عند الصيانة وإخطاء عند التطوير أنت في غنى عنها (الصنف container). كذلك الheader العلوية يجب أن تعيد كتابة تركيب html لها بشكل أفضل. مع وجود الإشكالات لديك نقدم لك إستراتيجية لتجعل الصفحة تستجيب على كافة الأجهزة الصغيرة ويمكنك التعديل على الكود بما يناسب حاجتك وكما يلي

	 
	/* تعديل الجصنف الذي يتضمن أيقونات التواصل الإجتماعي ليملأ عرض الصف كاملاً */
	.container .content .social-icons {
	    margin: 20px 0;
	    width: -webkit-fill-available;
	    display: flex;
	}
	 
	/* لايوجد تعديل */
	.container .content .social-icons a {
	    padding: 0 15px;
	    font-size: 30px;
	    color: white;
	}
	 
	/*  هنا تعطي حافظة الشعار والقائمة العلوية عرض أكبر حتى لايظهر مضغوطتً على الشاشات الصغيرة */
	header .container {
	  width: inherit;
	}
	 
	/* إضافة ميدياكويري لإخفاء العنوان الذي يشبه الشعار على الشاشات الصغيرة لأن الشعار يعوضه */
	@media (max-width:650px) {
	  .container .content h2 {
	 
	    display: none;
	  }
	}
	 
	/* تصغير حجم الخط على الشاشات الصغيرة */
	@media (max-width:470px) {
	  .logo h1{
	    font-size: large;
	   
	  }
	  /* .container .content h2 {
	    font-size: large;
	  } */
	 
	  .container .content p  {
	    font-size: large;  
	  }
	 
	}
	 
	/*بالإضافة لحجم الخط نقوم  بتعديل قيم المسافة عن الأطار في الشاشات الأصغر */
	@media (max-width:400px) {
	  header .container {
	    padding: 1em;
	  }
	 
	  .container .content{
	    padding-left: 1em;
	  }
	 
	  .logo h1{
	    font-size: medium;
	   
	  }
	
 
	  .container .content p  {
	    font-size: medium;  
	  }
	
 
	}