anyone know how to fix the code below , I want the collage to look like the image on desktop and on mobile i want the larger image at bottom with the two smaller ones on top side by side
/* General Styles */ body { font-family: Arial, sans-serif; margin: 0; background: #ffffff; } .zen-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .zen-section { display: flex; align-items: center; justify-content: center; margin-bottom: 60px; flex-wrap: nowrap; } .zen-image { width: 500px; height: 500px; object-fit: cover; border-radius: 10px; margin: 10px; flex-shrink: 0; } .zen-text { width: 100%; border-radius: 10px; padding: 20px; background-color: #ffffff; margin: 10px; } /* Collage Section */ .custom-collage-wrapper { margin: 60px 0; text-align: center; } .custom-collage-grid { display: flex; justify-content: space-between; align-items: stretch; gap: 20px; width: 100%; } .left-stack { display: flex; flex-direction: column; gap: 20px; width: 48%; } .collage-card { margin: 0; padding: 0; } .collage-card img { width: 100%; height: auto; display: block; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .large-image { width: 52%; } /* Mobile Layout */ @media (max-width: 1024px) { .zen-section { flex-direction: column !important; } .zen-image, .zen-text { width: 100%; height: auto; } .custom-collage-grid { flex-direction: column; gap: 20px; } .left-stack { flex-direction: row; justify-content: space-between; width: 100%; } .collage-card { width: 48%; } .large-image { width: 100%; } .zen-text { width: 100vw; margin: 0; padding: 20px; } .zen-image { width: 90vw; margin: 20px 0; } }
Powerful Support for Joint Health & Inflammation Relief
Introducing our ZenRoot Pro Supplement, packed with turmeric and powerful curcumin. Known for supporting a healthy inflammatory response, turmeric can help improve joint health and boost antioxidant levels. Research also suggests additional benefits for heart health, brain function, and digestion, making ZenRoot Pro a valuable addition to your wellness routine.
? Supports cognitive function
:flexed_biceps: Improves joint flexibility
:herb: Enhances gut health and blood flow
Feel the Zen: How ZenRoot Pro Supports Your Body
Experience real relief—soothe sore muscles, aching joints, and move with ease. This powerful formula helps reduce soreness, improve flexibility, and support joint health—so you can feel better every day.
Backed by Science for Real Joint Pain Relief
Made with scientifically researched ingredients, ZenRoot Pro targets inflammation at the source. Clinically studied and trusted by professionals—this formula works fast and supports long-term recovery.
The Turmeric Supplement That Leaves Others Behind
:check_mark: Superior Absorption: Designed for bioavailability so your body gets what it needs—fast.
:check_mark: Enhanced with BioPerine®: Boosts nutrient uptake by up to 2000% for real, lasting effects. Learn more
:check_mark: Faster Results: Feel relief quicker—without the need for megadoses.