Responsive Design - switching breakpoints

I have started using your excellent responsive design feature and it’s working really well. I have a mobile breakpoint up to 1024 wide and a desktop breakpoint for anything above that.

What I was wondering is whether it is possible to manually switch between them?

For example, if a phone or table user has a resolution of 1024x768, then the mobile version is displayed as expected - but is there a way to code a button that would allow the mobile user to show the desktop version if they so wish?

Hi Mackavi,

The content is laid out based on the size of the container.
So to show another layout, you must change the container size, then re-layout the content.
You can find the sample code below:

// change container size (width, height or both, depending on your design) = '1280px';
// = '930px';

// in mobile device, you may need to change viewport size too
// so that the display will be scaled to that viewport size without showing scrollbar
var viewport = document.querySelector('meta[name=viewport]');
if (viewport) {
  viewport.content = 'width=1280'; // or viewport.content = 'width=1280, height=930';

// layout the content


Brilliant, exactly what I was trying to achieve. Thank you.

A small request. Would it be possible to add the ability to have the html file when published set to index.html rather than the project name?

We’ll take note but I’m not sure if it’s implemented or not.
There’s no output file refers to the HTML file, you can freely change its name in File Explorer.



Yes, I rename it manually at the moment but as my web server’s loads index.html files automatically, it would just make it slightly easily if I could simply sync between my local and live systems without having to rename each time.