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

مشكلة هامش أبيض في صورة مستخدمًا Intersection Observer في الواجهة، ما السبب وكيفية حله؟

Ahmed Ebrahim11

السؤال

السلام عليكم

كنت اطبق intersection observer وتم الامر ولكن ظهرت معي المشكله التاليه ف الصوره يظهر هامش ابيض من الطرف الايمن ما سببه جربت overflow-y لم تنفع مع العلم انه حين انزل لاسفل وارجع ل home يزول الهامش ولكني عندما كنت اطبق او اخذ اسكرين للصفحه ب gofullpage ظهر الهامش بها.

واخيرا هل يوجد اي ملاحظات عل الصفحة او نصائح؟

Screenshot (518).png

salient.zip

تم التعديل في بواسطة Mustafa Suleiman
تعديل عنوان السؤال
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

قمت بتكبير وتصغير الشاشة فظهرت المشكلة بالفعل، لكن كان علي تفقد جميع العناصر بالصفحة لتفقد ما سبب المشكلة وتبين أنه القسم التالي في الصفحة:

Snag_13a9a344.thumb.png.043b668d3efab890f6b0988cdba1fdad.png

ولحل المشكلة عليك باستخدام overflow: hidden على القسم section.works .gallary-work كالتالي:

section.works .gallary-work {
    background-image: url(../images/hero-bg/app.jpg);
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    margin-top: 120px;
    overflow: hidden;
}

وبخصوص التصميم هو جيد أحسنت، لكن بخصوص التأثيرات عند التمرير فعليك بتقليص الوقت بحيث لا يشعر بها المستخدم فلا يجب أن ينتظر المستخدم أن تظهر العناصر أي يجب تحقيق التوازن بين هذا وذاك.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

كما أخبرك مصطفى فإن المشكلة من الصنف section.works .gallary-work .overlay .list-inline حيث أن التنسيق 

transform: translateX(50px);

هو ما يقوم بالمشكلة حيث يتنقل العنصر لليمين مما يجعل الصنف .list-inline خارج العنصر الأب 

لذلك الحل هو تبديل ال

transform: translateX(50px);

ب

padding-left: 50px;

أما بالنسبة للموقع فهو ممتاز من ناحية الأداء والتصميم الجيد المتناسق والتجاوبية ولكن هناك تعديل بسيط 

  • ال navbar  عند النزول للأسفل فالصنف Active يجب عليك إعطاؤه اللون اللون المستخدم في التصميم بدلاً من اللون الأزرق 
  • كما أن ال nav-links يفضل تغيير اللون من  الأزرق 
  • وال navbar عند النزول لأسفل لا تضيف الصنف transparent فيحدث تداخل بين ال navbar و العناصر في الخلفية 

لاحظ التعديلات في الصورة التالية2023-08-21121601.thumb.png.e23863bda59833cec6d3e16d1d733353.png

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...