محتاج حد يساعدنى ضرورى لحل مشكلة فى تصميم الموقع css/html

هنا يأتي دور إطار العمل Bootstrap حيث يسهل عليك تنسيق الصفحة ويجعلها more flexible عن طريق نظام Grid System أيضا هناك media query ب CSS لكنها تتطلب جهد أكبر وكود كثير حتى تستطيع حل مشكلتك وجعل الصفحات مناسبة لمختلف الشاشات.

أقترح عليك الدورة التالية المقدمة من الأستاذ أسامة الزيرو لتعلم البوتستراب:

أيضا يوجد في أكادميتنا "أكاديمية حسوب" شرح مفصل لإطار العمل البوتستراب.

ضع الكود ربما يساعدك احد الاخوة

يجب عليك تعلم عمل responsive لعناصر الصفحة و لديك طريقتين :

1. بواسطة media query ويمكنك تعلم ذلك من هنا :

كورس كامل لإنشاء تصميم متوافق على جميع الشاشات بواسطة media query من هنا :

1. وبواسطة إطار العمل bootstrap يمكنك أن تتعلم ذلك من هنا :

*إذا تستخدم إحدى الطريقتين والمشلكة مازالت فتأكد بأن هذا الكود يوجد داخل head داخل كود html

line 1 of code

يجب ان تتعلم

        responsive design     
 او افضل من هذا bootstrap

سبب هذه المشكلة انك تقوم بعمل التصميم علي شاشه معينه وعندما تنتقل من هذه الشاشة لشاشة اخري مختلفه في الحجم ( تكبر او تصغر المتصفح ) فان التصميم يظهر بشكل سي لان العناصر تكون غير متناسقة مع الحجم الجديد للشاشة وحتي تقوم بحل هذه المشكلة فانك تحتاج ان تخبر المتصفح ذلك

مثال : 

في شاشة الكبيرة يكون هناك ثلاث عناصر داخل السيكشن وإذا وضعت نفس الثلاث عناصر في الشاشات الصغيرة لن تظهر بشكل جيد ولكي تحل هذه المشكلة يجيب ان تخبر المتصفح انه في حالة الشاشات صغيرة الحجم اريد عنصر واحد فقط داخل السيكشن

وهناك طريقتين لتقوم بذلك باستخدام الكود

أولًا باستخدام ال media query

وهي خاصية موجوده في ال css تمكنك من التحكم في تنسيق العناصر علي حسب حجم شاشه معين

ثانيا باستخدام مكتبة ال bootstrap 

وهي مكتبة جاهزة توفر لك العديد من المميزات واهمها التحكم في تنسيق العناصر علي حسب حجم الشاشة وذلك بإضافة class للعنصر يحتوي علي قيمة معينة 

وانصحك أولا بتعلم ال media query من قناة ال zero web school