If your website looks broken, cramped or difficult to use on a phone, first identify what is causing the problem. Do not assume the entire website needs to be rebuilt.
1. Check what is actually wrong
Open the affected pages on a phone and identify the specific problems.
Look for:
Content extending beyond the screen
Text that is too small
Images that are cut off or too large
Overlapping elements
Buttons that are difficult to tap
Menus that do not work
Forms that are difficult to complete
Check several important pages because the problem may affect only certain layouts or components.
2. Check for horizontal scrolling
Visitors should not normally need to scroll sideways to read a page.
Look for fixed-width elements such as:
Images
Tables
Videos
Text sections
Containers
Embedded content
Make these elements flexible so they can fit within the available screen width.
3. Fix the mobile layout
If desktop columns are being squeezed onto a phone, change the layout for smaller screens.
Example:
Desktop:
Service 1 | Service 2 | Service 3
Mobile:
Service 1
Service 2
Service 3
Use your website builder’s responsive settings or CSS media queries, depending on how the website was built.
4. Check text and buttons
Make sure text remains readable and buttons are easy to select on a touchscreen.
Check headings, navigation, forms and calls to action rather than changing only the homepage.
5. Check images and media
Make sure images and videos resize correctly and do not extend beyond their containers.
Large image files can also increase loading time, so use appropriately sized and compressed images.
6. Test your changes
After making changes, test the website again on different screen sizes.
Check the:
Homepage
Main navigation
Service pages
Contact page
Forms
Important calls to action
Also test different browsers and actual mobile devices where possible.

Salesforce

