Skip to main content

Mobile & Responsive Design

Most of your visitors will see your site on a phone, so it needs to look great at every size. Kite builds responsive sites that adapt to phones, tablets, and desktops automatically — and when something doesn't look right on one size, you can ask Kite to fix just that.

How your site adapts

Kite designs your site to be responsive, meaning the layout adjusts to the visitor's screen. On smaller screens, content typically stacks vertically, text reflows, and the navigation menu often collapses into a hamburger menu (the three-line icon) to save space.

You don't have to design three separate sites. You design once, and Kite adapts it across screen sizes.

Previewing the mobile view

Before you publish, check how your site looks on a phone.

  1. Open the preview.
  2. Switch to the mobile (or tablet) view to see how the layout changes.
  3. Scroll through every page and check headings, images, buttons, and the menu.
tip

Always preview mobile before publishing. A layout that looks perfect on desktop can crop an image or push a button off-screen on a phone.

Asking Kite to fix mobile-specific issues

You can ask Kite to fix how something looks on one screen size without changing the others. Be specific about the screen size and the problem.

Cropped or truncated images on mobile:

On mobile, the hero image is cropped and cuts off people's faces. Please show the full image on mobile without cropping.

A hamburger menu showing at desktop widths:

The navigation is collapsing into a hamburger menu on desktop. On desktop, show the full menu with all links visible; only use the hamburger menu on mobile.

Different image positioning per breakpoint:

On desktop, keep the photo on the right of the text. On mobile, put the photo above the text and center it.

note

When you report a mobile issue, name the screen size (mobile, tablet, or desktop) and describe what you see now versus what you want. That helps Kite change the right breakpoint.

Troubleshooting

  • Images crop or cut off on mobile: Ask Kite to show the full image on mobile, or to change how the image fits on small screens.
  • Hamburger menu appears on desktop: Ask Kite to show the full menu on desktop and only collapse to a hamburger on mobile.
  • Text overflows or buttons run off the edge on phones: Tell Kite which page and section, and that it's happening on mobile.
  • Mobile looks fine in preview but wrong when published: Publish again and refresh on your phone — see Changes Not Showing.
  • The preview itself won't load: See Preview Not Loading.