إخفاء عناصر على الهواتف المحمولة

لحل مشكلتك، يمكنك استخدام فئة “mobile only” لإخفاء الصورة عندما يتم عرض الموقع على أجهزة الهواتف المحمولة. يمكنك تحقيق ذلك عن طريق تضمين فئة “mobile only” في العنصر الذي تريد إخفاؤه، وبذلك ستظهر الصورة فقط عندما يكون عرض الشاشة أكبر من 768 بكسل.

لتطبيق هذا التغيير على الشيفرة التي قدمتها، يمكنك استبدال الفئة “computer only” بـ “mobile only” كما يلي:

htmlCopy code
<div class="ui grid stackable">
  <div class="row middle aligned">
    <div class="nine wide column">
      <h1 class="ui header blue">Default Header.h1>
    div>
    <div class="seven wide mobile only column">
      <img class="ui image" src="http://icons.veryicon.com/png/System/iNiZe/niZe%20%20%20IMG.png" alt="" title="">
    div>
  div>
div>

بهذه الطريقة، ستظهر الصورة فقط عندما يكون عرض الشاشة أكبر من 768 بكسل، وستختفي عندما يكون العرض أصغر من ذلك.

بالتأكيد! إليك المزيد من المعلومات حول كيفية استخدام فئات Semantic UI لإخفاء العناصر على أحجام شاشات معينة:

1. “mobile only”: هذه الفئة تعني أن العنصر سيكون مرئيًا فقط على أجهزة الهواتف المحمولة (عرض شاشة أقل من 768 بكسل).

2. “tablet only”: تظهر العناصر التي تحتوي على هذه الفئة فقط على أجهزة الكمبيوتر اللوحي (عرض شاشة بين 768 بكسل و 991 بكسل).

3. “computer only”: تعني أن العناصر ستكون مرئية فقط على أجهزة الكمبيوتر (عرض شاشة 992 بكسل وأعلى).

باستخدام هذه الفئات، يمكنك تحديد أي العناصر تظهر على أي جهاز بناءً على عرض الشاشة. على سبيل المثال، إذا كنت تريد إظهار صورة فقط على أجهزة الهواتف المحمولة، يمكنك استخدام الفئة “mobile only” كما في المثال السابق.