My design does not look good on mobile

Why Your Page Might Look Bad on Mobile (And How to Fix It)

1. You Designed Only for Desktop View

One of the most common mistakes is designing your entire page in the desktop view and forgetting to adjust it for mobile. While GemPages automatically tries to make content responsive, elements like large text, oversized images, and tight spacing often need manual tweaking in mobile view.

Solution:
After finishing your desktop design, switch to the Mobile view in the editor and adjust font sizes, image scaling, margins, paddings, and element positions specifically for mobile users.

See how to do it in this official GemPages guide: Responsive Web Design Overview.

2. Improper Use of the Row Element

The Row element is essential for creating responsive layouts. If you don’t use it correctly, nested elements might not adjust properly across devices, leading to layout issues

For more information on how to create responsive layout using row element, please refer to this:

3. Elements Are Visible When They Shouldn’t Be

Sometimes, you hide an element on desktop but forget to hide it on mobile, or vice versa. This results in duplicated or unnecessary content showing up on mobile screens, confusing the user and cluttering the experience.

Solution:
Use the Visibility Settings in GemPages to show or hide specific elements depending on the device type. For example, you may want to hide complex image sliders or large blocks of text on mobile for a cleaner experience.

 Learn more about controlling visibility: Show/Hide Element or Section on Each Device.

4. Unoptimized Images for Mobile

Using high-resolution desktop images on mobile can cause slow load times and distorted visuals. Additionally, not setting appropriate image dimensions can lead to zoomed-in or misaligned images on smaller screens.

Please check this article on the Recommended Size for Images.

Best Practices for Great Mobile Design in GemPages

To ensure your GemPages pages look great on mobile, follow these key practices:

1. Start with Desktop, but Always Adjust for Mobile

GemPages is built for responsive design, but it’s still important to manually switch to mobile view and adjust your layout, typography, and spacing for smaller screens.

2. Use the Row Element to Create Flexible Layouts

Always structure your layout with the Row element. It allows content to resize or stack automatically depending on the screen size. Don’t build your layout with just standalone elements; wrap them inside a row for better control.

3. Adjust Font Sizes for Mobile

Large fonts look good on desktop but may overwhelm the user on a phone. Reduce font sizes and line spacing for headings, product names, and CTA buttons when designing for mobile.

For how to set different font sizes for desktop and mobile, please refer to this article.

4. Preview Frequently on Mobile

Use the Preview button in GemPages and test your layout on actual devices or mobile browser simulators. This helps catch any broken layout or misaligned content before you publish.

5. Minimize Hidden Elements

Avoid using hidden elements excessively. Even if something is hidden on mobile, it still loads in the background, which can slow down your page. Only use visibility settings when absolutely necessary.

6. Use Mobile-Optimized Images

Upload images that are lightweight and properly sized for mobile. This helps with page load speed and prevents distorted visuals.