1. The Golden Rule: Check Your Mobile View Often
You should never hit "Publish" without looking at the mobile view first. Famous.ai has a built-in device simulator right inside the editor so you can see exactly what your users will see on their phones.
Go to your Dashboard and open your project.
In the builder, look at the top right corner of your canvas.
Click the Phone icon to instantly switch to the mobile view.
Scroll through your entire site. Are the buttons easy to tap? Is the text too huge? Are the images getting cut off?
If anything looks weird, you can immediately use the tips below to fix it in the chat!
2. The Best Prompts for Mobile Optimization
You don't need to know how to code CSS breakpoints to fix mobile layouts. You just need to tell Famous.ai what you want to happen "on mobile screens."
Here are the most common mobile issues and the exact prompts to fix them:
Issue 1: Squished Columns
If you have a 3-column pricing or services grid, it will look terrible if it tries to stay 3-columns wide on a tiny phone screen.
The Fix:
"Make sure the 3-column services grid stacks vertically (one on top of the other) on mobile screens, but stays side-by-side on desktop."
Issue 2: Giant Text
A massive, bold headline looks great on a laptop, but on a phone, a single word might take up the whole screen.
The Fix:
"Reduce the font size of the Hero Headline and Subheadline specifically on mobile devices so it is easier to read."
Issue 3: Cluttered Navigation
A top menu with 6 different page links will wrap into an ugly, jumbled mess on a phone. You need a "hamburger" menu (the icon with three horizontal lines).
The Fix:
"Change the top navigation bar into a collapsible hamburger menu on mobile screens."
Issue 4: Elements That Just Don't Fit
Sometimes, a design element (like a complex chart, a background video, or a large decorative image) just doesn't belong on a mobile screen. You can ask the AI to hide it entirely!
The Fix:
"Hide the background video on mobile devices to improve load speed, and replace it with a solid dark blue background. Keep the video playing on desktop."
3. Pro-Tips & Tricks for a Premium Mobile Feel
If you want your website to feel less like a squished webpage and more like a premium app, keep these best practices in mind:
Make Your "Touch Targets" Bigger: A mouse can click a tiny link, but a thumb cannot. Ask the AI: "Increase the padding and size of all buttons on mobile so they are easier to tap."
Give It Breathing Room: Mobile screens can feel claustrophobic if text goes right up to the edge of the glass. Ask the AI: "Increase the left and right margins of all paragraphs on mobile so the text doesn't touch the edge of the screen."
Simplify Your Forms: Nobody wants to type out a 10-question form using their thumbs. If you have a long contact form, consider hiding non-essential fields on mobile. Ask the AI: "On the contact form, hide the 'Company Name' and 'Phone Number' fields on mobile screens, but keep them visible on desktop."
Sticky CTA Buttons: If you are building a landing page, you want the user to always have a way to buy or sign up. Ask the AI: "Make the 'Buy Now' button sticky at the very bottom of the screen on mobile, so it stays visible even when the user scrolls."
4. The "Mobile-First" Prompting Trick
Want to save yourself a ton of editing time? Build your site with mobile in mind from the very first prompt.
When you write your initial mega-prompt to generate a new page, just add one sentence to the end:
"Please ensure the design is fully responsive: stack all grids vertically on mobile, use a hamburger menu, and ensure all buttons are large enough for touch screens."
Famous.ai will build the mobile optimizations directly into the foundation of your site on the first try!