div position won't reset in responsive page

Question

I tried to find a solution here but couldn't find it. I'm working on this responsive design page. On mobile, when you tap menu, the main content div gets pushed aside (via Javascript) to reveal a left-fixed menu underneath. Everything works pretty fine except that when you see the webpage on a computer browser (resided to mimic mobile), open the menu and then expand the browser window till it hits the "desktop" breakpoint, the main content div remains pushed aside. Is there a way to reset the position of the content (main) div when maximized to the desktop breakpoint? I've tried many alternatives to no avail. Here's a jsfiddle link with the page: https://jsfiddle.net/luchosoto/wad3pmn0/1/

CSS for the main content div:

#main {
top: 0;
bottom:0;
width: 100%;
position:fixed;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
overflow-x:hidden;
z-index: 2;
transition: 500ms;
box-sizing: border-box;

}

Javascript that pushes main div aside to show menu:

var counter = 1;
function toggleNav() {

if (counter == 1){
    document.getElementById("main").style.transform = "translateX(60%)";
    counter = 0;
}else{
    document.getElementById("main").style.transform = "translateX(0%)";
    counter = 1;
}
}

Thanks in advance.

don't get caught up worrying about people who resize their browser. They are few and far between (2%). I learned this the wrong way. https://medium.com/@stephenkeable/do-users-resize-their-browser-windows-or-is-it-just-developers-and-designers-e1635cbae1e1#.crjqqhpbn — ntgCleaner, Jan 09 '17 at 21:35

score 0 · Answer 1 · edited May 23 '17 at 11:53

0

Since you are using javascript to move the div, you will also need to use javascript to move it back. You'll need to do that with a window.onresize listener. You can use something like this answer to achieve that.

edited May 23 '17 at 11:53

Community

1
1

answered Jan 09 '17 at 21:35

Zack Kirby

169
5

score 0 · Accepted Answer · answered Jan 09 '17 at 21:53

While Zack Kirby's answer sounds logical and ntgCleaner's comment is very useful, you could also add this CSS which forces the main div position to where you want it: JSFiddle

@media screen and (min-width: 801px) {
  #main {
    transform: translateX(0) !important;
  }
}

div position won't reset in responsive page

2 Answers2