Responsive Templates

What makes a template responsive?

Responsiveness - the ability to display properly on not just a desktop computer, but also mobile devices like phones and tablets - is a critical feature of modern templates.

How do you know if a template is responsive?

The easiest way would be to look at it on your smartphone.

If you don’t have a smartphone handy, or just want a quick test from your desktop web browser, you can use the mobile simulator that modern browsers generally come with.

Here’s how to do it in Google Chrome:

  1. Right click and select Inspect.

Inspect

  1. Click the “Toggle device toolbar” icon

Inspect

  1. Now your page will display as if it were being rendered on a mobile device. You can change the device using the dropdown at the top of the page.

Inspect

Another way is just to use your mouse and grab the corner of your browser window and drag it narrower, and watch what it looks like on smaller/larger screens.

Developers and designers might appreciate the https://responsively.app tool for looking at a site by simulating various common mobile devices.

TIP: Don’t design your site for “every possible mobile device”! It’ll never be “pixel-perfect”. Make it work well for the majority of devices that your site’s visitors are using: don’t worry about devices of people who aren’t your target customer.




Still have questions? No problem! Just head over to the Zen Cart support forum and ask there in the appropriate subforum. In your post, please include your Zen Cart and PHP versions, and a link to your site.

Is there an error or omission on this page? Please post to General Questions on the support forum. Or, if you'd like to open a pull request, just review the guidelines and get started. You can even PR right here.
Last modified September 2, 2020 by Chris Brown (a1c2e96).