Introduction

Infradox XS websites are responsive. I.e. your website will display properly on different screen sizes, and the layout will automatically adjust itself if a browser window is resized.

However, making your website look good on different (mobile) devices does require some work. Normally this work is done after the design for desktop web browsers has been implemented. The design should of course take different devices and screen sizes into account. What needs to be done and – what is and isn’t possible – depends on your design. Which is why websites are not automatically suitable for use on any device, and also why we can’t say beforehand how much work is involved.

If you opt for a custom design, it is important that you create designs for desktops, as well as for mobile devices.

Making your website responsive

To be able to have your website design automatically adjust itself based on the device someone uses to visit your website, you’ll need to add “css media queries”. Explaining CSS and/or media queries is beyond the scope of this article, but you can find all the info you need in this article: mozilla.org on using media queries. You’ll also need to know how to use the Code editor.

Infradox websites need a few changes for this to work:

First, go to Website configuration, “SEO, Metatags, Social” and enter width=device-width, initial-scale=1 in the viewport settings.

Now, go to the Code editor and select the “Device CSS” template in the drop down box. This is where you can add the required media queries. Make sure that the Enable checkbox is selected before you save your template.

Contracting Xpertise-ICT BV

You can contract us to add media queries to your CSS. We generally work on a fixed price basis, and we can send you a quotation after we have seen your mobile designs (e.g. what do you want your pages to look like on a mobile phone, on an iPad and so on).

You can of course also have 3rd parties work on your CSS, in which we are available to offer support if needed.