تعديل المظهر القائمة ليكون بشكل افقي | Adjusting the List Appearance to be Horizontal

Custom Coding
1

السلام عليكم
اهلا بكم

حبيت اشارككم طريقة لعرض القائمة بشكل افقي

البلوك المستخدم هو

Screenshot 2024-05-27 102607

وبدل عرضه كاعمدة وصفوف

خليت القائمة كلها افقية

بدا الشكل

image
image700×957 78.4 KB

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

<style>
._1s5ng9i0._1s5ng9i5b {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 50px;
    gap: 5px;
}

.dk0t0r3 {
    min-width: 80vw !important;
}

section._15bqpe66._15bqpe69._15bqpe6e {
    padding: 0;
}

.dk0t0r3 {
    margin-inline: 15px;
}


</style>

وعشان الكود يكون زابط حليت مشكلة زر see more
في مشاركة سابقة من دا الرابط تقدرو تتطلعو عليه

Hello everyone,

I wanted to share a method to display the list horizontally.

The block used is:

Screenshot 2024-05-27 102607

Instead of displaying it as columns and rows, I made the entire list horizontal.

Here’s how it looks:

image
image700×957 78.4 KB

If you want to use this method, you can use the following code in the header:

<style>
._1s5ng9i0._1s5ng9i5b {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 50px;
    gap: 5px;
}

.dk0t0r3 {
    min-width: 80vw !important;
}

section._15bqpe66._15bqpe69._15bqpe6e {
    padding: 0;
}

.dk0t0r3 {
    margin-inline: 15px;
}


</style>

And to make the code work properly, I solved the issue with the “See More” button in a previous post. You can check it out from this link.