مساعدة في تنسيق المشروع في الشاشات الصغيرة

لتنسيق المشروع  في الشاشات الصغيرة من المهم جدا استخدام الـ media queries لكي تستطيع تطبيق بعض الخصائص والتسيقات في أحجام شاشة معينة لذلك يرجى الإطلاع على هذه المقالة تبين لك كيفية تنفيذ ذلك

بعد ذلك لجعل التطبيق الخاص بك متجاوب في الشاشات التي أقل من 768px أولا علينا إضافة تغليف للجدول في ملف index.html فهو ما يخرب الصفحة فبدلا من 

  <table>
        <tr>
            <th>id</th>
            <th>title</th>
            <th>price</th>
            <th>taxes</th>
            <th>ads</th>
            <th>discount</th>
            <th>total</th>
            <th>category</th>
            <th>update</th>
            <th>delete</th>
        </tr>

        <tbody id="tbody">

        </tbody>
    </table>

نضيف التغليف ليصبح 

 <div class="table-responsive">
        <table>
            <tr>
                <th>id</th>
                <th>title</th>
                <th>price</th>
                <th>taxes</th>
                <th>ads</th>
                <th>discount</th>
                <th>total</th>
                <th>category</th>
                <th>update</th>
                <th>delete</th>
           </tr>
           <tbody id="tbody">
           </tbody>
       </table>
  </div>

بعد ذلك في ملف style.css سطر 78

.searchBlock {
  width: 90%;
  margin-left: 60px;
^^^^^^^^^^^^^^^^^^^^^^^^
}

نعدل هذا العنصر ليتوسط أفقيا بالعرض %90 كالتالي 

.searchBlock {
  width: 90%;
  margin:0 auto;
}

وفي نفس الملف أيضا نضيف هذه التنسيقات 

/* 1. غلف الجدول بحاوية متجاوبة */

.table-responsive {
  overflow-x: auto; /* اجعل الحاوية قابلة للتمرير أفقيًا عند ضيق الشاشة */
  margin: 10px 0; /* مسافة رأسية بسيطة فوق وتحت الجدول */
}

/* 2. اجعل عرض الجدول يملأ الحاوية */
.table-responsive table {
  width: 100%; /* الجدول يملأ عرض الحاوية بالكامل */
  min-width: 600px; /* الحد الأدنى لعرض الجدول حتى لا ينهار */
}

/* 3. تخصيص عناصر البحث والشكل العام تحت 768px */
@media (max-width: 768px) {
  .price {
    text-align: center; /* يوسّط النصوص والعناصر داخل حاوية السعر أفقياً */
  }
  .price input {
    width: 48%; /* مدخلات السعر تظهر اثنين في كل صف */
  }
  #total {
        margin: 6px 0; /* يضيف مسافة رأسية بسيطة فوق وتحت عرض الإجمالي */
        display: inline-block; /* يجعل صندوق الإجمالي يتصرف كعنصر سطري مع الحفاظ على خصائص الكتلة */
    }
  .btnSearch {
    flex-direction: column; /* ترتيب أزرار البحث بشكل عمودي */
  }
  .btnSearch button {
    width: 100%; /* الأزرار تملأ العرض بالكامل */
    margin-bottom: 6px; /* مسافة تحت كل زر */
  }

  /* تصغير الحشو وحجم الخط في الجدول */
  table th,
  table td {
    padding: 4px; /* تقليل الحشو لجعل الجدول أكثر اختصارًا */
    font-size: 0.9em; /* تصغير حجم الخط قليلًا */
  }
}

ودور هذه الأكواد هو table-responsive. يضيف حاوية قابلة للتمرير الأفقي مع مسافات علوية وسفلية  وكود table-responsive table. يجعل الجدول يملأ عرض الحاوية بالكامل ويمنع انضغاطه لأقل من 600px، وأخيراً في @media (max-width: 768px) تجد تعديلات على مدخلات السعر لتظهر اثنين في الصف، وترتيب أزرار البحث عموديا مع ملء العرض لكل زر وإضافة مسافة رأسية بسيطة فوق وتحت عرض الإجمالي وترتيب الحشو وحجم الخط في خلايا الجدول وكل سطر مكتوب أمامه تعليق يفسر وظيفته.
وهذه هي الملفات بعد التعديل index.html style.css