Responsive Design Features

Custom Media Queries

You can create any media query you like with Pyxxi (see CSS Generator). You can also import entire stylesheets.

Responsive Preview

There are three ways to preview your site on different devices. 

Resize the Responsive View Dialog

That's the main window that contains your design. 

Hover the mouse over the edge until an arrow appears (desktop) and then drag. The contents of the dialog will change as you drag, so you get a live preview of how your site will look on different width devices. 

You can then continue to make changes to your layout in the normal way. 

Open a Mobile or Tablet Preview Window

Click the tablet  or mobile  button at the top of the page. A small window will open showing either an average mobile or an average tablet preview. 

You can leave these windows open while you're working, but you cannot make changes in them. To refresh them, click the relevant button again.

Preview Entire Website

Click the Preview Button  in the top menubar to preview your entire website in a new browser window. 

Flexbox

Flexbox or the Flexible Box Module is probably the most powerful tool there is for building responsive websites. 

With it, you can make elements automatically shrink, expand and align to fit any screen size (see Flexbox at WC3 Schools). 

To use Flexbox in Pyxxi. Click a container element, and set the display (Block Format dialog) to flex container or inline flex container. 

Alternatively, you can add Pyxxi's flex_container class to an element.  

To flex the inner boxes: 

Select each of the elements inside your container box. 

Under flex box (Block Format dialog) set shrink to 1 and grow to 1 and basis to 200px, for example.  

Alternatively you can add Pyxxi's flexbox_auto class to each element.

If you then shrink and expand the main window, you can see how Flexbox works.