How to create a Responsive Web Design with EcomSolid

In this article, you will learn about responsive web design and how to create one with EcomSolid.

What Is Responsive Web Design?

Responsive Web Design adjusts how content on a page is displayed according to the dimensions of the device’s screen. Responsive Web Design is important to improve user experience and site performance. It makes text and images easier to view for visitors using a mobile or tablet since the screen is smaller than a standard desktop. 

How to create a Responsive Web Design?

Step 1: From the EcomSolid Dashboard, head to the Theme Editor or Page Editor.

Step 2:  Access the Library from the top bar of the Editor Page.

 

 

You will see all the essentials to design a website, including various sections and add-ons. Select your preferred section or add-on to add it to your page.

 

 

Step 3: After that, you will find the section/add-on inserted into your Editor. Click on the add-on to start configuring the settings. 


You might see some settings are marked with a Laptop icon. That means you will be able to adjust the display on specific devices including mobile, tablet, laptop, or desktop. 


 


On the top bar of the editor, you can find the option to switch among devices. First, adjust the settings on the Desktop version. After that, select other devices to view its interface. If it doesn’t meet your expectation, make adjustments to other devices as needed.


For example, if you want the height of your Banner different between the Desktop and Mobile versions. 

 


First, use the slider or input the number into the box for the preferred height of your banner on the Desktop version. Next, switch to Mobile view and change the height here. Please be noted that your changes to one device won’t be applied across the others.  


 

That's it! If you run into any problems when editing, please get in touch with our Customer Support via email or live chat.


Was this helpful?