Responsive web design: How can I make the desktop view different from the mobile view? | Help Center

In this article, you will learn how to make your pages more friendly on different screens.

People now spend significantly more time on their smartphones and tablets than their desktops or laptops. Therefore, it is important to have a mobile-optimized site for store owners. Understanding this demand, GemPages offers the user greater control over responsiveness and how a web layout is viewed across individual devices.

Attention: If you start designing with the desktop version, it will be automatically adjusted to the type of device that the visitor is using. This way will help you to save time for building a page rather than starting from the Mobile version. If you want to isolate the mobile formatting from the desktop format, let's follow the following tips to handle responsiveness.

Adjust the mobile font size

Step 1: To adjust the font size of text elements, such as Heading, Textblock, etc. you can click on the element and select a specific device in two ways:
- From the left sidebar, select the Settings tab, then scroll to Typography. Click on the Desktop icon on the right side
- Click on the Desktop icon on the top toolbar

Step 2: You can adjust the font size, line height, or letter spacing for each screen mode without affecting other screens.

Responsive Columns Layout

GemPages' responsive layout grid adapts to screen size and orientation, ensuring consistency across all layouts. When you use a Row element to divide content into different columns, it will automatically re-arrange itself depending on screen size.

For example: On desktops, it might look better with the content organized in two-column, but on mobile, it would be better if the content items were stacked on top of each other or in a column.

On the desktop:

Grid columns are divided into twelve for a row so that columns will stack no matter the viewport. You can adjust column width in More settings. It is very simple with just moving the yellow bar from left to right or vice versa.

On the mobile:

Set dimensions with Padding and positioning elements with Margin

When you switch to mobile, you may need to edit padding or margin to ensure that your design is more balanced. The setting is easy to find, in the Spacing settings of the Design tab.

Hide & show elements

With GemPages's visibility feature, you can go as far as hiding elements on specific devices to create a variety of designs on 1 single page. Select the Design tab and toggle on or off each screen mode under Visibility settings.

Visibility shouldn't be overused as it could make your page speed slower (the invisible elements are just hidden to users and always loaded along with other elements).

If you want a closer look at how to configure mobile responsive pages, you can learn more by following this video:

Attention: If you start designing with the desktop version, it will be automatically adjusted to the type of device that the visitor is using. This way will help you to save time for building a page rather than starting from the Mobile version. If you want to isolate the mobile formatting from the desktop format, let's follow the following tips to handle responsiveness.

That’s it! If you're interested in learning more about powerful, user-friendly GemPages, please feel free to figure out more articles here or reach our Support Team. We'd be happy to answer any questions you have.