In 2020, website traffic from mobile officially surpassed desktop. Therefore, adapting your site for mobile and other devices is an 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 orientation with no further adjustments from the audience’s end.
You are watching: Can I Change Shopfiy Mobile Site Without Changing Desktop
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
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.
See more : Can I Block Numbers On My O2 Mobile
Make as many adjustments as you see fit. We’ll list some tips for you down below.
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 thanks 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.
See more : Can I Cancel Mint Mobile After 3 Months
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
And there you have it! Responsive web design is crucial in optimizing your front store’s layout on as many devices as possible, as well as ensuring customers’ experience. The best part is you can get it all done easily with GemPages – with very little to 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.
Source: https://tholansonnha.com
Category: mobile
