كيفية عمل ويب متجاوب

وعليكم السلام,

لكي نفهم ماذا يحصل هنا يجب علينا تعلم أساسيات الويب المتجاوب وهو جعل صفحة الويب الذي نعملها متجاوبة مع كل أنواع الشاشات وهي التلفونات والايباد وما شابهه من الشاشات وكيفية عمله يمكن تعلم مواضيع ال flexbox,grid لتحقيق ذلك.

يمكنك الإطلاع على أساسيات الموضوع من هنا.

أولا عليك تنظيم HTML بشكل صحيح ليكون كالتالي:

<div class="timeline">
    <div class="timeline-item">
        <div class="number">1</div>
        <div class="text">الجودة</div>
    </div>
    
    <div class="timeline-item">
        <div class="number">2</div>
        <div class="text">الاتقان</div>
    </div>
    
    <div class="timeline-item">
        <div class="number">3</div>
        <div class="text">الابداع</div>
    </div>
</div>

ثانيا تنظيم CSS مع إضافة Media Queries:

/* التنسيق الأساسي */
.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* الخط العمودي */
.timeline::before {
    content: '';
    position: absolute;
    width: 2px;
    background: #00ffdd;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1px;
}

.timeline-item {
    position: relative;
    margin: 40px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.number {
    width: 40px;
    height: 40px;
    background: #00ffdd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.text {
    position: absolute;
    right: 55%;
    margin-right: 20px;
}

/* التنسيق للجوال */
@media screen and (max-width: 768px) {
    .timeline::before {
        left: 31px;
    }
    
    .timeline-item {
        justify-content: flex-start;
        padding-left: 10px;
    }
    
    .text {
        position: relative;
        right: auto;
        left: 20px;
        margin: 0;
    }
    
    .number {
        margin-left: 10px;
    }
}

وهنا قمنا بتحريك الخط العمودي للجانب في الجوال بدلا من المنتصف وتغيير موضع النصوص لتكون بجانب الأرقام في الجوال ثم تنظيم العناصر بشكل أفقي في الجوال بدلا من التوزيع حول الخط وهذا يظهر بشكل منظم في الجوال ويحافظ على سهولة القراءة ويتناسب مع حجم الشاشة أرجو مراجعة المفاهيم الآتية لفهم المطلوب:

كما تمت الإشارة في التعليقات السابقة.

يمكنك مراجعة المزيد من المفاهيم المتعلقة بتجاوبية الصفحات على الويب كي تحقق ما ترغب فيه أقترح عليك بعض المقالات المفيدة في هذا السياق من هنا:

https://alistapart.com/article/responsive-web-design/

لمساعدتك بشكل أفضل يتوجب علينا الإطلاع على كود التنسيقات لديك .

ويفضل إستخدام ال flexbox في css حيث هي الخاصية الحديثة والتي يتم إستعمالها في التصميمات المتجاوبة :

ويمكنك قراءة الدرس التالي على موقع موسوعة حسوب:

• https://wiki.hsoub.com/CSS#تخطيط_Flex_Box

حيث يمكنك إستخدام الخاصية justify-content ووضع قيمة center لها والتي تقوم بوضع العنصر في منتصف الحاوية له :

justify-content: center;

إذا ما زالت المشكلة تواجهك يرجى إرفاق ملفات الأكواد للإطلاع عليها.