Скройте боковую панель на планшете и мобильном устройстве, не влияя на макет (сохраняйте ширину на рабочем столе)

Question

Рабочий стол

Мобильный / планшетный вид

Выше показано, что я хочу. Как вы можете видеть, настольная версия имеет width=1024px, а также мобильный телефон / планшет. Единственный измененный элемент - это боковая панель, которая будет скрыта на мобильном телефоне или планшете.

Как обычно, для завершения адаптивного макета я использую метапоиск и медиазапросы области просмотра

<meta name="viewport" content="width=device-width, initial-scale=1">
@media only screen and (max-width: 1023px){} 

Но на этот раз все выглядит иначе. Я не могу использовать initial-scale=1, потому что он показывает только половину веб-сайта. Я понятия не имею, что я должен изменить для мета области просмотра. Так что это хорошо исправить на планшете и мобильном телефоне. Надеюсь, что некоторые из вас могли бы дать мне несколько советов. Спасибо!

$(".show-hide-btn").click(function() {
		$(".menu_resp").toggleClass("menuvisible")
	});

.floatleft{ float: left;}
.floatright{ float: right;}
.sectionpanel{width: 180px; line-height: 1em !important; background-color: #e5e5e5;}
.sectionpanel .loginsect{background-color: #c5d960; padding: 18px 14px;}
.sectionpanel .whiteborder{margin: 10px 0; border: 1px solid #f9fcfd;}
.sectionpanel .loginicon{padding-top:8px;}
.sectionpanel .logininfo{padding-left:10px;}
.sectionpanel .styleSelect select{font-size:10px; font-weight: bold; width: 152px; border-radius:5px; padding: 5px; border: 1px solid #d2d0d0;background: transparent; -webkit-appearance: none;}
.sectionpanel .styleSelect { overflow: hidden; background: url("../images/icons/dropdownbtn.png") no-repeat right #fff; border-radius:5px;}

.sectionpanel .menunav{background-color:#e5e5e5;}
.sectionpanel .menunav .nav a{font-size: 12px; color:#565656; display: block; width: 155px; padding: 8px 10px 8px 15px;}
.sectionpanel .menunav .nav a:hover, .sectionpanel .menunav .nav a.active{background-color:#3f98ce; color: #fff; width: 155px; padding: 8px 10px; border-left: 5px solid #2b6a91; }


@media only screen and (max-width: 1023px){
  .header-right-btns{
		position:fixed;
		left:0;
		display:block;
		z-index: 100;
	}

	.show-hide-btn{
		background:url(https://image.ibb.co/kL1Gdc/menu_respo.jpg) no-repeat left top;
		width:42px;
		height:42px;
		float:left;
		text-indent:-9999px;
	} 



	#wrapper_menu .first, #wrapper_menu .first{
		border-top:none;
	}

	#wrapper_menu .last, #wrapper_menu .last{
		border-bottom:none;
	}

	.menuhidden{
		position: absolute;
		top: 50px;
		left: -252px;
		background:#3d3b3c;
		z-index:10;
		transition:left ease-in-out 0.2s;
		z-index: 1000;
	}

	.menuvisible{
		left: 0;
	} 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="column sectionpanel">
  <div class="header-right-btns">
    <a href="#" class="show-hide-btn"></a>
  </div>
  <div id="wrapper_menu" class="menu_resp menuhidden">
    <div class="loginsect">
      <div class="greentxt txt12">Logged in as</div>
      <div class="greentxt_bold txt12">School</div>
      <div class="whiteborder"></div>
      <div>
        <div class="floatleft logininfo">
          <div class="dartbluetxt txt10">Welcome</div>
        </div>
      </div>
      <div class="clear"></div><br/>
      <div class="styleSelect">
        <select>
          <option value="">Please select premises</option>
          <option value="">Please select premises</option>
          <option value="">Please select premises</option>
        </select>
      </div>
    </div>
    <div class="menunav">
      <div class="nav"><a class="active" href="#"><div class="hicon">Homepage</div></a></div>
      <div class="nav"><a href="#"><div class="aicon">Main Navigation 02</div></a></div>
      <div class="nav"><a href="#"><div class="aicon">Main Navigation 03</div></a></div>
      <div class="nav"><a href="#"><div class="aicon">Main Navigation 04</div></a></div>
      <div class="nav"><a href="#"><div class="aicon">Main Navigation 05</div></a></div>
    </div>
  </div>
</div>
<div class="column secctn">
  content
</div>

Answer 1

Вы можете использовать это

sidebar {
  display: none;
}

main {
  width:100%;
}

@media only screen and (min-width: 1200px){
  main {
    width:800px;
  }

  sidebar {
    width: calc(224px);
    display: block;
  }
}

и вы можете использовать это:

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

Вот как то так: https://jsfiddle.net/4vec4kgy/4/