Responsive (FLUID) pages

1

We need help with a code that can make all our pages responsive and look the same on all devices. We designed on mobile to look good on 375px but on 390 and 420px phones, it doesn’t look very good. Please help us how we can make everything responsive on desktop, mobile, tablet

2

Hi @devom :waving_hand:

Great question — responsive design can be tricky, especially when working with custom layouts!

To make your Funnelish pages fluid and responsive across all screen sizes (mobile, tablet, desktop), here’s a step-by-step theoretical approach you can follow:

:white_check_mark: Step 1: Use Fluid Widths Instead of Fixed Pixels

  • Avoid fixed pixel widths like width: 375px.
  • Use relative units like %, vw, or max-width: 100% to ensure elements adapt to different screens.

:white_check_mark: Step 2: Use Media Queries

  • Add CSS media queries to adjust styles at different breakpoints (e.g., 390px, 420px, 768px, etc.).
  • Target specific devices or screen ranges for better control over spacing and font sizing.

:white_check_mark: Step 3: Check Padding & Margins

  • Large padding or margins can break layouts on small screens. Use relative spacing like em, rem, or %.

:white_check_mark: Step 4: Avoid Absolute Positioning

  • Try not to use position: absolute unless necessary — it often breaks layouts on varying screen sizes.

:white_check_mark: Step 5: Stack Elements Vertically on Small Screens

  • For mobile devices, stack columns and reduce layout complexity for better readability and alignment.

:white_check_mark: Step 6: Test Across Devices

  • Use Chrome DevTools to preview at multiple screen sizes.
  • Test on actual phones or simulators when possible.

:link: To provide more accurate help, could you please share a preview link or a reference funnel that’s giving you trouble? This will allow me to suggest layout-specific fixes or improvements.

Happy to help make your pages look sharp across every screen! :blush: