مشكلة في ال Media Queries

@حسين محمد سالم درعه

قم رجاءً بالتعليق اسفل الدرس الذي تتحدث عنه حتى نستطيع مساعدتك بشكل افضل.

قسم اسئلة  البرمجة مخصص للأسئلة العامة وليس لأسئلة الدروس.

اطلع على صفحة كيف اتواصل مع المدربين

كما اني لم اجد اي ميديا كويري في الكود الخاص بك ولم افهم مالذي تريده تماماً.

أرجو منك التعليق أسفل فيديو الدرس في المرة القادمة.

المشكلة الخاصة بك يتم حلها من خلال وضع عرض أكبر من 13% لعناصر div داخل .h مثلاُ ثم قم بوضع 400px كعرض لها وأيضًا وضع margin لها بقيمة 20px لوضع مسافة بينها عندما تتراص بشكل رأسي.

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

ولكن أنت قمت بكتابة الكثير من الأكواد التي لا يوجد داعي لها ولا مشكلة في ذلك طالما الكود يعمل في البداية، وبإمكانك تحسين الكود من خلال كتابته بالشكل التالي:

HTML

   <section class="boxes">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </section>

CSS

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.boxes div {
  background-color: bisque;
  width: 400px;
  margin: 20px;
  font-size: 40px;
}