اذهب إلى المحتوى

السؤال

Recommended Posts

  • 0
نشر

بعد الإطلاع على الكود الخاص بك لابد لنا من توضيح بعض الأمور لك لتجنب تكرارها في المستقبل. من السيء جداً أن تعرف إسم صنف في حاوية معينة ثم تقوم بتعريف صنف أخر بنفس الإسم في حاوية اخرى حيث يسبب هذا إرباك عند الصيانة وإخطاء عند التطوير أنت في غنى عنها (الصنف 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;  
	  }
	
 
	}
	

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...