How to create a responsive web design


This article explains to you what responsive web design is and how to design perfectly responsive pages using GemPages.


In 2020, website traffic from mobile officially surpassed desktop. Therefore, adapting your site for mobile and other devices is the essential thing to do. This is where responsive web design comes into play.


What is Responsive Web Design?

Simply put, Responsive web design makes your website look good on all devices, regardless of screen size, resolution, and orientations with no further adjustments from the audience’s end.

Built with responsive in mind, GemPages Page Builder lets you easily design a page with four main device types: Desktop, Laptop, Tablet, and Mobile.

Let's go over the how-to guide in the following sections.


Enable Responsive Web Design


Only changes to the Desktop view will be applied across all four views. Thus, we recommend you start designing with the Desktop view first, then make adjustments to other views as needed.


Step 1: Go to the GemPages Dashboard and enter one of your pages using the “Edit” button.

Step 2: In the Editor, there are two methods to start your responsive design:

Method 1: Select a device to view its interface from the top bar.

Method 2: Click on the element you want to edit and look for the Desktop icon on the top right corner. Hit the icon and select the device you want to switch to.


Make as many adjustments as you see fit. We've listed down some tips for you in the following paragraphs.

Step 3: Hit “Save” and “Publish” once you are finished to update the changes to your front store.


Use the Row element to create sections

As a base element, Row is often used to create sections due to its responsive nature. It can automatically adjust itself and the nested elements to different devices.

Follow these steps below to create a section using the Row element.

Step 1: In the GemPages Dashboard, click the “Edit” button on one of your pages and enter the Editor.

Step 2: Search for the Row element, then drag & drop one onto your page.

Step 3: Check the Settings tab displayed in the left sidebar. Select the layout you want for the Row in the Desktop view.


You can manually adjust the layout for all four views by hitting “More settings” and drag the yellow slider for the corresponding view.

Step 4: Drag & drop other elements inside the Row and configure them using the Settings and Design tabs.


Step 5: Hit “Save” and “Publish” once you are finished to bring your changes to the live store.


Adjust the Margin and Padding


Margin is the space between the borders of one element and others.

Padding is the space inside the element.

These two parameters allow you to cleverly position each of your elements in the exact spot. The settings for Margin and Padding can be found in any element’s Design tab, under the Spacing section.



Show or hide elements


The hidden elements will still be loaded in the background, so we advise you not to overuse this. In each element's Design tab, find your way to the Visibility section. Here you can use the switch to show/hide the element on all four devices types.


And there you have it! Responsive web design is crucial in optimizing the customer experience, and you can get it done easily with GemPages - no additional coding required.

Check out more of our articles to master GemPages in no time, and if you need any assistance, please reach out to our GemPages Support Team any time via email or live chat.


Was this helpful?