Perform a complete responsive optimization of my entire website for MOBILE and TABLET.
IMPORTANT:
Do NOT redesign, modify, replace, or restructure the Desktop version.
The current Desktop design must remain exactly as it is.
Your job is only to optimize Tablet and Phone breakpoints.
Go through EVERY PAGE and EVERY SECTION of the website and make sure the design looks polished, premium, professional, and intentional on mobile devices.
MOBILE REQUIREMENTS:
1. Create or properly configure Phone and Tablet breakpoints wherever necessary.
2. Fix all horizontal overflow. Nothing should extend outside the mobile viewport.
3. Replace inappropriate fixed widths with responsive sizing such as Fill, 100%, 1fr, or appropriate Max Width values.
4. Convert multi-column desktop layouts into clean vertical stacks on mobile when necessary.
5. Maintain the same visual identity, content, colors, images, typography style, buttons, and overall luxury aesthetic of the Desktop website.
6. Do NOT delete any content.
7. Do NOT rewrite or change any text.
8. Do NOT replace any images.
9. Optimize typography for mobile:
- Reduce oversized headings proportionally.
- Keep headings visually strong.
- Maintain comfortable line lengths.
- Prevent text from being cut off or overflowing.
- Keep body text easy to read.
10. Optimize spacing:
- Reduce excessive desktop padding on mobile.
- Maintain consistent horizontal margins.
- Maintain comfortable spacing between sections.
- Remove unnecessary empty spaces.
- Do not make sections feel cramped.
11. Optimize images:
- Keep correct aspect ratios.
- Never stretch or distort images.
- Adjust image crop/position when necessary for mobile.
- Make trailers fully visible whenever the design requires the complete trailer to be shown.
12. Optimize cards and grids:
- Desktop grids should intelligently convert to fewer columns or one column on mobile.
- Cards should fit completely inside the viewport.
- Keep consistent spacing and alignment.
13. Optimize the navigation:
- Make the navigation clean and functional on mobile.
- Use a hamburger menu if necessary.
- Make sure the logo is correctly sized.
- Prevent navigation elements from overlapping.
14. Optimize buttons:
- Buttons must remain easy to tap.
- Prevent text wrapping incorrectly inside buttons.
- Maintain consistent button sizing and spacing.
- Important CTAs should remain clearly visible.
15. Fix all:
- overlapping elements
- cropped text
- horizontal scrolling
- broken layouts
- inconsistent padding
- oversized elements
- undersized elements
- misaligned elements
- images extending outside containers
- cards extending outside the screen
16. Pay special attention to:
- Hero sections
- Trailer size cards
- Trailer galleries
- Forms
- CTA sections
- Footer
- Legal pages
- Navigation
- Images with text overlays
17. Make the Phone version look intentionally designed for mobile, not simply like a compressed Desktop website.
18. Check the design at approximately:
- 390px phone width
- 430px phone width
- Tablet width
19. After making the changes, review every page again and fix any remaining responsive layout problems.
FINAL REQUIREMENT:
Desktop must remain unchanged.
Only modify responsive behavior and Tablet/Phone breakpoint overrides.
The final result should feel like a professionally designed premium mobile website for Warrior Food Trailers.
