My website looks different on mobile
My website looks different on mobile
What can cause this
Reflow adapts Canva websites to different screen sizes by stacking elements vertically, so wide full-screen elements may not resize cleanly, and browsers, browser versions, and device dimensions can display the site differently.
What to do
- Check for overlaps: Select elements in your design and resize or crop them so their borders don’t touch.
- Break up wide elements: Replace large elements that span the full width with smaller ones that stack neatly.
- Stay within the safe margins: Keep important elements inside the safe margin boundaries.
- Preview on mobile: Use the mobile preview panel while editing. Treat it as an approximation, since the published site can vary by device and browser.
- Group and lock: Group related elements, then lock the group so they stay together.
Group elements
If you want certain elements to stay together, group them. Otherwise, they might separate in mobile view.
- Drag your cursor over the elements you want to group. You can also hold Shift on your keyboard and select the elements.
- On the floating toolbar, select Group.
- To check how your grouped elements appear on mobile, click the Preview.
- In the preview panel, click the Mobile button to see the mobile layout.
See how the text boxes stack on mobile view in the example below.
Was this helpful?
Helpful
Unhelpful