Responsive web design is an essential aspect of modern web development. With the rise of mobile devices and tablets, websites must be optimized to look good and function properly on various screen sizes. In this article, we’ll explore how to achieve responsive web design with GemPages.
About GemPages Responsive web design
GemPages has tools to help users optimize their pages for mobile and tablet devices, such as responsive settings and element visibility. In that way, you can create pages that are specifically designed for mobile users, ensuring a good experience for customers who visit your store on their mobile devices.
Create a responsive layout
To create a layout for a page, you will need to use the Row element. It plays a vital role in GemPages by providing a foundation for your page design. Its primary function is to contain elements and adapt responsively to various screen sizes on different devices. Follow the steps below to add a row to your page to create a responsive layout.
Step 1: In the GemPages Dashboard, click the “Edit” button on one of your pages and enter the Editor.
Step 2: Navigate to the left sidebar and locate the Row there under the Layout section. You can then drag and drop the element onto your desired location.
Step 3: Navigate to the left sidebar and select the Settings tab. To customize the layout for Tablet or Mobile, click on the Desktop icon and choose the corresponding icon.
For a brief guideline on how to use the Row element to create a responsive layout, you can also take a look at our video tutorial.
Adjust responsive element settings
GemPages offers a variety of responsive elements that you can use to create custom pages and sections. These elements include Headings, Images, Text, and more. When designing your pages, make sure to use these responsive elements to ensure that your content looks great on any device.
You can switch between devices by clicking on the Desktop icon next to the setting. However, you can only change the responsive settings for the component that has this icon.
Show or hide elements
To show or hide an element on all three device types, go to the Advanced tab and use the switch in the Visibility section. Remember, you need to have at least one screen type enabled.
Check your design on different devices
Once you finish building your pages, it’s important to check your final design on different devices. From the top bar of your Editor, you can select a device to view its interface including Desktop, Tablet, and Mobile. This will help you identify any issues with the layout or content that may be impacting the user experience. You can also expand the editor to view the visual on the actual screen size.
For any further assistance, our GemPages Support Team is here to help. Please reach us via email or live chat.
