إليك تغييرات CSS الخاصة بي لتحسين العرض على الأجهزة المحمولة.
أنا أحب هذا القالب تمامًا، ولكني لاحظت بعض الأشياء الصغيرة غير المألوفة، لذا أضفت أيضًا CSS التالي لجعله يبدو أفضل قليلاً من وجهة نظري. آمل أن يساعد هذا شخصًا آخر لديه نفس التفضيلات.
إليك الأصل (بدون تعديل)
لاحظ ما يلي في الصورة أعلاه:
- الرقم 1 الذي يمثل الردود بعيد جدًا إلى اليسار.
- فقاعة الموضوع تتداخل قليلاً مع الخلفية الزرقاء.
- لا توجد مسافة بادئة بين كل المحتوى والخلفية الزرقاء.
- الخلفية الزرقاء لا تبدو جيدة في صفحة الفئة. أحبها على الصفحة الرئيسية.
إليك كود CSS الذي أضفته في علامة التبويب Mobile.
/* إضافة بعض المسافة البادئة لمنطقة الفئة، والفئة الفرعية، والعلامات، والبحث، والأحدث، والموضوع الجديد، والإشعارات */
.list-controls {
padding: 5px;
}
/* إضافة بعض المسافة البادئة لمنطقة المواضيع */
div#list-area {
padding: 6px;
}
/* محاذاة رقم الردود إلى اليمين أكثر */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
float: right;
}
تم التحديث (بعد إضافة CSS)
إذا كنت تفضل أيضًا إزالة الخلفية الزرقاء، فإليك الكود لإزالتها فقط من صفحات الفئة.
/* إزالة الخلفية الزرقاء للفئة فقط */
html .category .background-container {
background: #fff;
clip-path: none;
}
