شكرًا على التحديث! 
باستخدام بعض حيل CSS، قمت بنقل الصورة الرمزية كطبقة فوق الصورة المصغرة في وضع البطاقة:
.featured-topics__topic-details .topic-author {
position: absolute;
right: 30px;
bottom: 30px;
}
كيف يمكنني تقليل ارتفاع div الخاص بـ (المؤلف الموضوع) (الأرجواني) إلى 0 وإزالة الفجوة بشكل فعال مع الاستمرار في عرض الصورة الرمزية؟
إذا كنت تكتب CSS مخصصًا، فبدلاً من إضافة رمز يعيد كتابة أحد التخطيطات المحددة مسبقًا، أوصي باختيار لا شيء كخيار تخطيط في إعدادات السمة وتحديد أنماطك من البداية.
على سبيل المثال، يمكنك نسخ ورقة أنماط البطاقات الافتراضية وتحديد حاوية featured-topics__topic-details كشبكة. بعد ذلك، يمكنك وضع عناصرها بالضبط كما تريد، بدلاً من تحريكها باستخدام إعلانات مطلقة.
هذه فكرة رائعة!
في الوقت الحالي، نحن راضون عن القالب وبعض التعديلات الطفيفة على CSS لاختباره مبدئيًا. بمجرد وصولنا إلى مرحلة تحسين معدل النقر إلى الظهور، سنتبع نصيحتك على الأرجح. 
لست متأكدًا مما إذا كان هذا سلوكًا متوقعًا أم يمكن اعتباره خطأً:
عند تعيين ثلاثة مواضيع في الإعدادات، ولكن يتم عرض اثنين فقط، يظهر فراغ حيث يجب أن يكون الموضوع الثالث. سيكون من المثالي تغيير حجم البطاقات لملء العرض بالكامل في مثل هذه الحالات.
إذا كان أي شخص مهتمًا باستخدام التمرير الأفقي على الهاتف المحمول، فإليك بعض أكواد CSS التي توصلت إليها (بمساعدة الذكاء الاصطناعي). وهي تتضمن أيضًا بعض تعديلات التمرير والتكبير التي وجدتها أكثر ملاءمة لحالتنا.
ملاحظة: حاولت أيضًا إنشاء بعض أقراص التنقل دون إضافة HTML، لكن هذا كان بالتأكيد مبالغًا فيه.
@media (max-width: 750px) {
.featured-topics__topic-wrapper {
display: flex !important;
flex-direction: row !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding: 1em 10vw; /* تباعد جانبي لرؤية البطاقات المجاورة */
gap: 1rem; /* تباعد متناسق بين البطاقات */
overscroll-behavior-x: contain; /* منع تداخل التمرير الزائد */
scroll-behavior: smooth; /* تمرير سلس */
scrollbar-width: none; /* إخفاء شريط التمرير */
-ms-overflow-style: none;
}
.featured-topics__topic-wrapper::-webkit-scrollbar {
display: none; /* إخفاء شريط التمرير في متصفحات WebKit */
}
.featured-topics__topic-container {
flex: 0 0 80vw; /* بطاقات أضيق للرؤية الجانبية */
min-width: 280px; /* الحد الأدنى للعرض للشاشات الصغيرة */
scroll-snap-align: center; /* توسيط كل بطاقة عند التمرير */
height: unset !important; /* ارتفاع متناسق */
}
.featured-topics__topic-thumbnail {
height: 40vw;
width: 100%;
}
}
مرحباً، شكراً جزيلاً على هذه المكونة، أحببتها!
هل يمكن لأحد المساعدة في تعديل حجم العنوان لأنه كبير جداً حالياً؟
تلقيت رسالة خطأ تفيد بأن هذا المكون يحتاج إلى تحديث للتوافق مع تغييرات Discourse الأساسية القادمة. هل يعرف أحد ما إذا كان هناك تحديث مخطط له؟
لقد قمت بتحديث المكون في وقت سابق من هذا العام. تحتاج إلى إعادة التثبيت لاستخدام الإصدار الجديد، انظر: 
Featured Topics - #38 by manuel
أوه، شكراً جزيلاً لك، لقد نجح الأمر!
الشيء الوحيد الذي لا يمكنني إصلاحه (لقد كنت أضايق Chat GPT لمدة ساعة على ما أعتقد…) هو ارتفاع البطاقات - أي نصائح حول كيفية تقليله/إزالته؟
مرحباً مانويل - هل هناك طريقة لجعل مكون السمة الرائع الخاص بك هنا يتجاهل الصور (بحيث يعرض مقتطفًا بدلاً من ذلك)؟
لدي العديد من المواضيع المميزة بدون صور (والتي أريد تمييزها)، لكنها تبدو سيئة للغاية بجوار تلك التي تحتوي على صور. أيضًا، أنا مهتم بالنص أكثر من الصور.
يقوم قالب المكون بعرض محتوى متنوع متاح حول موضوع ما. ثم يتم ضبط المظهر النهائي باستخدام قواعد الأنماط. على سبيل المثال، عند تحديد “بطاقات” كتخطيط، يتم إخفاء مقتطفات الموضوع عند وجود صورة مميزة وإظهارها كلما لم تكن موجودة:
إذا كنت تريد دائمًا عرض المقتطف وعدم عرض صورة أبدًا، يمكنك إما تحديد “لا شيء” للتخطيط وإضافة ورقة الأنماط الخاصة بك. أو تجاوز القواعد الموجودة في تخطيط البطاقات التي تعرض الصورة وتخفي المقتطف.
