Responsive Issue

1

Hi

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…

Desktop.JPG1636×1179 516 KB

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

Mobile without menu.JPG1046×1179 354 KB

Mobile with menu.jpg1047×1178 227 KB

Thanks.

2

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

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.3.5/mobile-detect.min.js"></script>
	
<script>
function layoutRequest(hypeDocument, element, event) {

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

  }

  if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
  }
  window.HYPE_eventListeners.push({"type":"HypeLayoutRequest", "callback":layoutRequest});
</script>
2 Likes
3

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