صفحهٔ اصلی: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌تر تفاوت با ویرایش جدیدتر ←

دیداریویکی‌متن

@@ خط ۴: / خط ۴: @@
      align-items: center;
      margin: 0;
-     padding: 0;
+     padding: 20px;
+    min-height: 100vh;
+    background-color: #f8ede7;
 ">
      <div style="
          display: flex;
+        flex-direction: row;
          align-items: center;
-         background-color: #f8ede7;
+         background-color: white;
          padding: 30px;
          border-radius: 15px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          max-width: 100%;
+        width: 800px;
      ">
-         <div style="flex: 1; padding: 15px;">
+         <div style="flex: 1; padding: 15px; order: 1;">
              <h1 style="color: #5D4037; margin-top: 0;">عنوان متن شما</h1>
              <p style="color: #3E2723; line-height: 1.6;">این یک متن نمونه است که در کنار تصویر قرار می‌گیرد. شما می‌توانید این متن را با محتوای مورد نظر خود جایگزین کنید.</p>
          </div>
-         <div style="margin-left: 30px;">[[پرونده:حوزه-مجازی-ضحی.png|بندانگشتی|300x300px]]
+         <div style="margin-left: 30px; order: 2; text-align: center;">
+            <img src="حوزه-مجازی-ضحی.png" alt="تصویر نمونه" style="max-width: 100%; height: auto; border-radius: 10px;">
          </div>
      </div>
 </div>
+<style>
+    @media (max-width: 768px) {
+        div > div {
+            flex-direction: column !important;
+            padding: 20px !important;
+        }
+        div > div > div {
+            margin-left: 0 !important;
+            margin-bottom: 20px !important;
+            order: 2 !important;
+            width: 100% !important;
+        }
+        div > div > div:last-child {
+            order: 1 !important;
+        }
+    }
+</style>
+-----
 <div style=" id="textContainer">