Responsive Issue


I have my main layout, intended to be viewed on desktop. I also have my variations for different mobile device widths. Is there a way to stop the versions intended for mobile popping up when I resize the desktop browser window to a narrower width? I have a different menu layout on the narrower mobile versions which I don’t want apearing when I’m viewing the site on the desktop. I just want the desktop version to fill the window (it has long pages so you scroll down to see the overflow) and just scale up and down as I resize the browser window. Hope that makes sense.

Here’s the desktop version…

And here’s the mobile version with the menu folded and unfolded…


this in the head should load only biggest layout when not mobile device …

<script type="text/javascript" src="//"></script>
function layoutRequest(hypeDocument, element, event) {

var md = new MobileDetect(window.navigator.userAgent);
if (!{
var currSceneName = hypeDocument.currentSceneName(),
biggestSceneLayout = hypeDocument.layoutsForSceneNamed(currSceneName)[hypeDocument.layoutsForSceneNamed(currSceneName).length -1],
layoutName =;
return layoutName
return false


  if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
  window.HYPE_eventListeners.push({"type":"HypeLayoutRequest", "callback":layoutRequest});

Fantastic. Thank you for that, I shall have a go with that later today.