مصطفى اوريك نشر 29 سبتمبر 2021 أرسل تقرير مشاركة نشر 29 سبتمبر 2021 السلام عليكم. لدي مشكلة -هذا إن كانت مشكلة- في تحقيق التجاوبية لصفحتي. عندما يصل عرض الشاشة لـ 343px و أقل : سترون ظهور فراغ أبيض في يمين الصفحة فما سبب المشكلة ؟ رابط الصفحة للمعاينة : https://mostafa-100.github.io/Responsive-Beginner-JS-Project/ رابط الأكواد : https://github.com/Mostafa-100/Responsive-Beginner-JS-Project 2 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 شرف الدين حفني نشر 29 سبتمبر 2021 أرسل تقرير مشاركة نشر 29 سبتمبر 2021 هذا الفراغ الأبيض يحدث بسبب أن خصاصية الoverflow قيمتها الإفتراضية للعناصر visible مما يسبب في حالتك عند الشاشات الصغيرة هذا الفراغ الأبيض , قم بوضع قيمة الoverflow للclass المُسمى intro_container ب auto كما في الشفرة التالية .intro_container{ overflow:auto; } وستجد الموقع يعمل دون مشاكل اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 مصطفى اوريك نشر 29 سبتمبر 2021 الكاتب أرسل تقرير مشاركة نشر 29 سبتمبر 2021 بتاريخ 10 دقائق مضت قال شرف الدين2: قم بوضع قيمة الoverflow للclass المُسمى intro_container ب auto إختفى ذلك الجزء الأبيض, على الأقل لا يظهر إلا في العرض 186px إلى تحت ملاحظة : قمت بوضع الخاصية في ال class المسمى intro و ليس intro__container, لم يعمل معي الأمر عندما وضعت الخاصية في هذا الأخير اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Adnane Kadri نشر 29 سبتمبر 2021 أرسل تقرير مشاركة نشر 29 سبتمبر 2021 يبدوا أن العنصر body لا يأخذ كامل عرض الصفحة في الشاشات الأقل من 343 بكسل . إعطاء العنصر body القيمة fit-content في خاصية العرض الأدنى للعنصر min-width قام بحل المشكل لدي: body{ min-width: fit-content; } توثيق الخاصية : هنا . اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 شرف الدين حفني نشر 29 سبتمبر 2021 أرسل تقرير مشاركة نشر 29 سبتمبر 2021 قم بوضع تلك التنسيقات وستختفي المساحة البيضاء أيا كان مقاس الشاشة html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow-x: hidden; } اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 مصطفى اوريك نشر 29 سبتمبر 2021 الكاتب أرسل تقرير مشاركة نشر 29 سبتمبر 2021 بتاريخ 1 دقيقة مضت قال Adnane Kadri: إعطاء العنصر body القيمة fit-content في خاصية العرض الأدنى للعنصر min-width قام بحل المشكل لدي: جربته و هو فعال حقا, لكن لماذا العنصر <body> لا يأخذ كامل عرض الصفحة في القياسات التي ذكرتها ؟ بتاريخ 3 دقائق مضت قال شرف الدين2: قم بوضع تلك التنسيقات وستختفي المساحة البيضاء أيا كان مقاس الشاشة شكرا عمل هذا أيضا, لكن إذا قمت بتصغير عرض الشاشة يختفي جزء من مكونات الصفحة, فماذا أفعل لكي لا يحدث هذا ؟ 2 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 شرف الدين حفني نشر 29 سبتمبر 2021 أرسل تقرير مشاركة نشر 29 سبتمبر 2021 بتاريخ 4 دقائق مضت قال مصطفى اوريك: جربته و هو فعال حقا, لكن لماذا العنصر <body> لا يأخذ كامل عرض الصفحة في القياسات التي ذكرتها ؟ شكرا عمل هذا أيضا, لكن إذا قمت بتصغير عرض الشاشة يختفي جزء من مكونات الصفحة, فماذا أفعل لكي لا يحدث هذا ؟ المعذرة, قم بتغيير خاصية الoverlow لتصبح scroll بدلاً من hidden , وستﻻحظ بعدها ظهور مؤشر يمكنك من عرض الأجزاء المخفية اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 مصطفى اوريك نشر 29 سبتمبر 2021 الكاتب أرسل تقرير مشاركة نشر 29 سبتمبر 2021 بتاريخ 1 دقيقة مضت قال شرف الدين2: قم بتغيير خاصية الoverlow لتصبح scroll بدلاً من hidden , وستﻻحظ بعدها ظهور مؤشر يمكنك من عرض الأجزاء المخفية لم تفهم قصدي أريد أن تظهر مكونات الصفحة بشكل عادي و بدون إستعمال scroll, فهل هذا ممكن ؟ 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 شرف الدين حفني نشر 29 سبتمبر 2021 أرسل تقرير مشاركة نشر 29 سبتمبر 2021 بتاريخ الآن قال مصطفى اوريك: لم تفهم قصدي أريد أن تظهر مكونات الصفحة بشكل عادي و بدون إستعمال scroll, فهل هذا ممكن ؟ يمكنك عبر تصغير الخط وتعديل مكونات الصفحة بإستخدام الmedia query لتناسب المقاسات الصغيرة 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Adnane Kadri نشر 29 سبتمبر 2021 أرسل تقرير مشاركة نشر 29 سبتمبر 2021 بتاريخ 2 دقائق مضت قال مصطفى اوريك: جربته و هو فعال حقا, لكن لماذا العنصر <body> لا يأخذ كامل عرض الصفحة في القياسات التي ذكرتها ؟ لاحظ أن عنصر الفقرة التالية : <p>Unlimited Possibilities</p> يمتد على عرض أكثر من عرض الحاوي له , و ذلك حتى يحافظ على التخطيط الشبكي grid layout للعنصر الحاوي له بالصنف التالي : intro__container . يسبب تمدده على عرض أكبر من عرض الصفحة امتلاكه للخاصية التالية : .intro p:last-of-type { font-size: 3.8rem; } فلو تقم بتقليل حجم الخط الذي يمتلكه ستلاحظ عودة الصفحة لحجمها الطبيعي , و ذلك لعدم إمتداد الحاوي الشبكي على عرض أكبر من عرض الصفحة . و ليكن مثلا حجم الخط 2.1rem . جعل أحجام الخطوط تجاوبية يجب أخذه بالإعتبار أيضا , و لذلك أفضل تقليل حجم النص لعنصر الفقرة عوضا عن إعطاء العنصر body القيمة fit-content للخاصية min-width . فهاته القيمة ليست مدعومة بعد من قبل كامل متصفحات الويب . 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
مصطفى اوريك
السلام عليكم.
لدي مشكلة -هذا إن كانت مشكلة- في تحقيق التجاوبية لصفحتي.
عندما يصل عرض الشاشة لـ 343px و أقل : سترون ظهور فراغ أبيض في يمين الصفحة
فما سبب المشكلة ؟
رابط الصفحة للمعاينة : https://mostafa-100.github.io/Responsive-Beginner-JS-Project/
رابط الأكواد : https://github.com/Mostafa-100/Responsive-Beginner-JS-Project
رابط هذا التعليق
شارك على الشبكات الإجتماعية
9 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.