اذهب إلى المحتوى
  • 0

مشكلة في الresponsive

Ziad Mohamed15

السؤال

Recommended Posts

  • 0

قمت بالاطلاع على الكود الخاص بك، ثم تبديل الصف col-6 بالصفين col-12 col-md-6 كالتالي:

  <div class="row"> 
      <div class="col-12 col-md-6"> <!-- هنا -->
        <h2 class="section-title">شيتوس جيم</h2>

        <p>يسعى في ضمان حصولك على جميع ما تحتاجه من أجل تحقيق كافة أهدافك الصحية والوصول إلى مستوى متطور من اللياقة البدنية ويتم ذلك من خلال استخدام أحدث المعدات المتطورة وبرامج التأهيل ذات الإستراتيجيات المختلفة </p>
      </div>
      <div class="col-12 col-md-6"> <!-- هنا -->
        <img src="https://img.freepik.com/free-photo/caucasian-sport-abdominal-background-wall_1296-394.jpg?size=626&ext=jpg&ga=GA1.2.237098104.1665821310" alt="" srcset="">
      </div>
  </div>

لأن الصف col-12 يطبق على جميع الشاشات ما لم نخصصه بصف آخر مختص بشاشة معيّنة، فإذا خصصنا على شاشة كما في المثال (col-md-6) ستطبق على الشاشة المحددة وهي المتوسطة هنا وما فوقها أي وعلى الشاشة الكبيرة أيضاً. فيصبح معنى هذين الصفين أنه في حال الشاشات قبل الmd سيأخذ من الgrid عرض 12 عمود، وعند الشاشة md فما فوقها سيأخذ العرض 6 أعمدة من الgrid.

ثم قمت بوضع العرض النسبي 100% :width للصورة عوضاً عن العرض الثابت 380px، لكي تتناسب مع جميع الشاشات فتأخذ العرض المتاح فقط.

تم التعديل في بواسطة معاذ قره محمد
رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...