How to Optimize Mobile Responsiveness on Carrd
Carrd sites are automatically responsive, but fix overflowing text, cramped buttons, and misaligned elements by previewing in mobile view, switching to Manual mode under Appearance > Mobile, and tweaking widths, padding, and font sizes with percentages. Test on real devices for touch usability; most fixes take 15-45 minutes.
Prerequisites
- Free or Pro Carrd account
- Access to carrdd.co builder
- Basic editor familiarity
- Test device or browser tools
Step-by-Step Instructions
Log in and Open Site Editor
carrdd.co, log in, and select the site you want to optimize. Ensure you're in the editor for the correct project to see real-time updates.Switch to Mobile View
Switch to Mobile View from the top toolbar menu to simulate a mobile screen. Scroll through the entire site to identify issues like overflowing text, misaligned images, cramped buttons, or excessive spacing.Adjust Section Widths and Spacing
Width to auto or percentage-based values (e.g., 90-95%) to prevent overflow. Increase Padding or Margins modestly (e.g., 20-40px) for breathing room without horizontal scrolling.Optimize Text Elements
Font Size (e.g., headings to 24-32px, body to 16-18px for readability). Set Line Height to 1.4-1.6x font size for proper wrapping. Use left or center alignment and keep labels short.Fine-tune Images and Media
Width to percentage (e.g., 90-100%) or auto, preserve aspect ratio, and avoid fixed pixels (e.g., not 500px). For centering issues, use manual mobile mode in the next step.Enable Manual Mobile Settings
Appearance panel, scroll to Mobile toggle at bottom, and switch from Auto to Manual. Adjust mobile-only options like margins (10-20px), width (80%), or alignment (center). Use Auto for unchanged settings.Optimize Buttons and Links
Height and Padding (e.g., 48-60px height for touch targets, 16px padding). Ensure 20px+ spacing between elements, high contrast colors, and short text. Test taps in Mobile View.Handle Advanced Layouts like Headers
Desktop Only visibility in Settings > Visibility. Create a mobile version with icons (e.g., menu icon URL to #mob-nav). Add a dropdown section at bottom for stacked nav.Test and Iterate
Publish and Verify
Publish. View the live site on actual devices. Carrd provides automatic responsiveness with SSL; no code or config files needed.Common Issues & Troubleshooting
Overflowing text or headings
Select text element, switch Appearance > Mobile to Manual, reduce font size (24-32px), increase line height, and use left/center alignment.
Misaligned or cutoff images
Click image, enable Manual mobile mode, set width to 90-100% or auto, adjust alignment to center, and preserve aspect ratio.
Cramped buttons or links
Increase button Height (48-60px) and Padding (16px), add 20px+ spacing, ensure high contrast, and test taps.
Horizontal scrolling or tight spacing
Reduce section Width to 90-95%, increase Padding/margins (20-40px), and use percentage-based values.
Complex headers/nav not stacking
Duplicate header, set one to Desktop Only, create mobile version with dropdown icon linking to #mob-nav section.