إصلاح HTML/CSS لصفحة دعوة عيد الميلاد على الجوال

استخدمتُ صفحة دعوة/نموذج دعوة شخصية لعطلة نهاية أسبوع عيد ميلاد كلود كملف HTML واحد متكامل (جميع الصور مضمنة بصيغة base64، بحجم 17 ميجابايت تقريبًا). أحتاج إلى مطور واجهة أمامية متوسط ​​الخبرة لوضع اللمسات الأخيرة على تصميم الهاتف المحمول وإصلاح بعض المشكلات البسيطة - هذا عمل تحسين فقط، وليس مشروعًا جديدًا بالكامل. **ما تم بناؤه بالفعل:** - تصميم سطح المكتب مع خطوط مخصصة ونظام ألوان وصور مضمنة - كتلة CSS للهاتف المحمول مكتوبة مسبقًا (استعلام الوسائط عند أقصى عرض: 720 بكسل) - نموذج تأكيد الحضور - علامات تعريف معاينة OG/iMessage لنشر Netlify - نسختان: مع نموذج تأكيد الحضور وبدونه **ما يحتاج إلى إصلاح:** 1. صور قسم الحدث بها هوامش يمين/يسار غير متساوية بسبب خصائص flex لسطح المكتب (align-items: flex-start, flex: 0 0 210px على عنصر فرعي) والتي تمتد إلى الهاتف المحمول. نحتاج إلى هوامش متساوية 8 بكسل على كلا الجانبين. 2. يجب أن تملأ الصور العرض المتاح. فعاليات بصورتين: نسبة العرض إلى الارتفاع (3:4) جنبًا إلى جنب. فعاليات بأربع صور: شبكة مربعة 2×2. 3. يجب أن يلتف نص عنوان الفعالية (مثل "WELCOME SPREAD") إلى سطرين - يجب أن يظهر في سطر واحد عند عرض 390 بكسل. 4. يجب تقليل المسافة بين نص المحتوى والصور (بفاصل 6-8 بكسل تقريبًا). 5. التحقق من عرض نموذج تأكيد الحضور بشكل صحيح على الهاتف المحمول (عمود واحد، بدون تكبير/تصغير عند التركيز على حقل الإدخال في نظام iOS). **الملفات المرفقة:** ملفان HTML لقطات شاشة لنموذج مرجعي توضح التصميم المستهدف بدقة وثيقة مواصفات التصميم الكاملة. **المرشح المثالي:** شخص يجيد استخدام أدوات مطوري Safari، ويكتشف تعارضات خصائص CSS فورًا، ويحلها بكفاءة. تكمن المشكلة الأساسية في تجاوز خصائص Flex الموروثة لخصائص الهاتف المحمول - وهو حل سريع للشخص المناسب.