title: asp.net mvc partial pages in layout not responsive
body: <p>I have partial views in my layout for Sidebar,TopNavigation(header),Right Bar(Chat bar) and footer(media player). I have just laid colored the background of each section to highlight the difference. I am not good in UI and new to MVC. The layout page is unresponsive as shown below</p>
  
  <p><a href="https://i.stack.imgur.com/O9Dam.jpg" rel="nofollow noreferrer">Layout</a></p>
  
  <p><a href="https://i.stack.imgur.com/uqLks.jpg" rel="nofollow noreferrer">Unresponsive landing page</a></p>
  
  <p></p>
  
  <pre><code>    &lt;div id="left" style="width: 20%; background: red;float:left;height:auto"&gt;
          @Html.Partial("_SideBar")
  
      &lt;/div&gt;
  
      &lt;div id="right" style="width: 20%; background: green;float:right;height:auto;"&gt;
          @Html.Partial("_ChatBar")
      &lt;/div&gt;
      &lt;div id="header" style="position: absolute;width:55%; top: 0; left: 20%; right: 0; height: 30px; background: blue;"&gt;
          @Html.Partial("_TopNav")
      &lt;/div&gt;
  
      &lt;div id="content" style="width:60%;background: lime;float:left;height:auto;"&gt;
          @RenderBody()
      &lt;/div&gt;
      &lt;div id="footer" style="width:100%;background:none;clear:both;position:fixed;top:auto;bottom:0px;visibility: visible;display: block;left:0px;right:0px;"&gt;
          @Html.Partial("_fullPlayer")
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>_SideBar.cshtml</p>
  
  <pre><code>&lt;!-- Sidebar Holder --&gt;
  &lt;nav id="sidebar"&gt;
      &lt;div class="sidebar-header"&gt;
  
          @Html.Partial("_Weather")
      &lt;/div&gt;
  
      &lt;ul class="list-unstyled components"&gt;
          &lt;li class="active"&gt;
              &lt;a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false"&gt;
                  &lt;i class="glyphicon glyphicon-home"&gt;&lt;/i&gt;
                  Home
              &lt;/a&gt;
              &lt;ul class="collapse list-unstyled" id="homeSubmenu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt; &lt;a href="~/Albums/Index.cshtml"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home 3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;
                  &lt;i class="glyphicon glyphicon-briefcase"&gt;&lt;/i&gt;
                  About
              &lt;/a&gt;
              &lt;a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false"&gt;
                  &lt;i class="glyphicon glyphicon-duplicate"&gt;&lt;/i&gt;
                  Pages
              &lt;/a&gt;
              &lt;ul class="collapse list-unstyled" id="pageSubmenu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;
                  &lt;i class="glyphicon glyphicon-link"&gt;&lt;/i&gt;
                  Portfolio
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;
                  &lt;i class="glyphicon glyphicon-paperclip"&gt;&lt;/i&gt;
                  FAQ
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;
                  &lt;i class="glyphicon glyphicon-send"&gt;&lt;/i&gt;
                  Contact
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>_TopNav.cshtml</p>
  
  <pre><code>    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"&gt;
  &lt;link href="~/Content/Album/css/ticker.css" rel="stylesheet" /&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
         function createTicker(data) {
              $(container).append(
                  '&lt;li class="list-group-item"&gt;' +
                  '&lt;span class="badge"&gt;' + data.name + '-' + data._embedded.venues[0].city.name + ',' + data._embedded.venues[0].state.stateCode + ',' + data._embedded.venues[0].country.countryCode + '&lt;/span&gt;' +
                  '&lt;a href=' + data.url + '&gt;&lt;/a&gt;' +
                  '&lt;/li&gt;'
              );
          }
  
          function recursiveGetProp(obj, lookup, callback) {
              for (property in obj) {
                  if (property === lookup) {
                      callback(obj[property]);
                  } else if (obj[property] instanceof Object) {
                      recursiveGetProp(obj[property], lookup, callback);
                  }
              }
          }
  
  
          var appKey = "xbpEva5O0SOLwPxCONoGfmywOnRwVTvS";
          var artist = "taylor swift";
          var events = "https://app.ticketmaster.com/discovery/v2/events.json?apikey=" + appKey + "&amp;keyword='" + artist + "'"
          debugger;
  
          var e = "https://cybup.blogspot.com",
              t = 20;
          $.ajax({
              url: events,
              //type: "get",
              dataType: "json",
              success: function (data) {
                  function t() {
  
  
  
                      $("#adbreakingnews li:first").slideUp(function () {
                          $(this)
                              .appendTo($("#adbreakingnews ul"))
                              .slideDown();
                      });
                  }
                  var n,
                      b,
                      r,
                      s = "",
                      a = data;
                  if (void 0 !== a) {
                      if (a._embedded.events.length &gt; 1) {
  
                          recursiveGetProp(a, 'events', function (obj) {
                              if (obj !== null) {
                                  s = "&lt;ul&gt;";
  
                                  $.each(obj, function (i) {
                                      b = obj[i].name + '-' + obj[i]._embedded.venues[0].city.name + ',' + obj[i]._embedded.venues[0].state.stateCode + ',' + obj[i]._embedded.venues[0].country.countryCode;
                                      (r = b),
  
                                          (s += '&lt;li&gt; &lt;a href="' + obj[i].url + '" target="_blank"&gt;' + r + "&lt;/a&gt;&lt;/li&gt; ");
  
                                      // createTicker(obj[i]);
                                  });
  
                                  (s += "&lt;/ul&gt;"),
                                      $("#adbreakingnews").html(s),
                                      setInterval(function () {
                                          t();
                                      }, 5e3);
  
                              }
                          });
  
                      }
  
                  } else $("#adbreakingnews").html("&lt;span&gt;No result!&lt;/span&gt;");
  
              },
              error: function () {
                  $("#adbreakingnews").html("&lt;strong&gt;Error Loading Feed!&lt;/strong&gt;");
              }
          });
      });
  
  &lt;/script&gt;
  &lt;div class="headerTop"&gt;
      &lt;div&gt;
          &lt;button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn"&gt;
              &lt;i class="glyphicon glyphicon-align-left"&gt;&lt;/i&gt;
          &lt;/button&gt;
  
      &lt;/div&gt;
  
      &lt;div id="breakingnews"&gt;
          &lt;span class="breakhead"&gt;&lt;i class="fa fa-refresh fa-spin"&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;div id="adbreakingnews"&gt;Loading...&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>_ChatBar.cshtml</p>
  
  <pre><code>&lt;div id="divContainer" class="aside-md bg-light dk"&gt;
  &lt;h4 class="font-thin m-l-md m-t"&gt;Connected&lt;/h4&gt;
  
  &lt;div id="divLogin" class="login"&gt;
      &lt;div&gt;
          Your Name:&lt;br /&gt;
          &lt;input id="txtNickName" style="color:black;" type="text" /&gt;
      &lt;/div&gt;
      &lt;div id="divButton"&gt;
          &lt;input id="btnStartChat" style="color:black;" type="button" class="submitButton" value="Start Chat" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="divChat" class="chatRoom"&gt;
      &lt;div class="title"&gt;
          Welcome to Chat Room [&lt;span id='spanUser'&gt;&lt;/span&gt;]
      &lt;/div&gt;
      &lt;div class="content"&gt;
          &lt;div id="divChatWindow" class="chatWindow"&gt;
          &lt;/div&gt;
          &lt;div id="divusers" class="users"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="messageBar"&gt;
          &lt;input type="text" id="txtMessage" /&gt;
          &lt;input id="btnSendMsg" type="button" value="Send" class="submitButton" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;input id="hdId" type="hidden" /&gt;
  &lt;input id="hdUserName" type="hidden" /&gt;
  </code></pre>
  
  <p></p>
  
  <p>_fullmediaplayer.cshtml</p>
  
  <pre><code>&lt;footer class="footer"&gt;
  &lt;div id="mediawrapper" class="container-fluid"&gt;
      &lt;audio id="mejsAudio" type="audio/mp3" controls="controls" width="100%" height="30px" style="max-width: 100%; max-height:30px"&gt;
          &lt;source src="http://k003.kiwi6.com/hotlink/9ucf2r3yo6/chasing_cars_cover_chris_-_for_hollie_s_cover.mp3" title="Chasing Corporate" type="audio/mpeg" /&gt;
          &lt;source src="http://www.mediaelementjs.com/media/AirReview-Landmarks-02-ChasingCorporate.mp3" title="Air Review - Chasing Corporate"&gt;
          &lt;source src="http://www.mediaelementjs.com/media/AirReview-Landmarks-04-AllBecauseYoureMine.mp3" title="Air Review - All Because You're Mine"&gt;
          &lt;source src="http://k003.kiwi6.com/hotlink/9ucf2r3yo6/chasing_cars_cover_chris_-_for_hollie_s_cover.mp3" title="Chris - Chasing Cars(Cover)"&gt;
          &lt;source src="http://k004.kiwi6.com/hotlink/vvy55kc7c5/new_distance.mp3" title="SmallCityLights - New Distance"&gt;
          &lt;source src="http://k003.kiwi6.com/hotlink/0c2q7je6rn/i_got_you.mp3" title="Jamie Ray - I got you"&gt;
          &lt;source src="http://k006.kiwi6.com/hotlink/081qjgl6pt/when_you_re_gone_cover_chris_.mp3" title="Chris - When You're Gone Cover"&gt;
          &lt;source src="http://www.miaowmusic.com/mp3/Miaow-07-Bubble.mp3" title="Miaow - Bubble"&gt;
          &lt;source src="http://k003.kiwi6.com/hotlink/9ucf2r3yo6/chasing_cars_cover_chris_-_for_hollie_s_cover.mp3" title="Chasing Corporate" type="audio/mpeg" /&gt;
  
          &lt;source src="http://www.mediaelementjs.com/media/AirReview-Landmarks-02-ChasingCorporate.mp3" title="Air Review - Chasing Corporate"&gt;
          &lt;source src="http://www.mediaelementjs.com/media/AirReview-Landmarks-04-AllBecauseYoureMine.mp3" title="Air Review - All Because You're Mine"&gt;
          &lt;source src="http://k003.kiwi6.com/hotlink/9ucf2r3yo6/chasing_cars_cover_chris_-_for_hollie_s_cover.mp3" title="Chris - Chasing Cars(Cover)"&gt;
          &lt;source src="http://k004.kiwi6.com/hotlink/vvy55kc7c5/new_distance.mp3" title="SmallCityLights - New Distance"&gt;
          &lt;source src="http://k003.kiwi6.com/hotlink/0c2q7je6rn/i_got_you.mp3" title="Jamie Ray - I got you"&gt;
          &lt;source src="http://k006.kiwi6.com/hotlink/081qjgl6pt/when_you_re_gone_cover_chris_.mp3" title="Chris - When You're Gone Cover"&gt;
          &lt;source src="http://www.miaowmusic.com/mp3/Miaow-07-Bubble.mp3" title="Miaow - Bubble"&gt;
      &lt;/audio&gt;
  &lt;/div&gt;
  &lt;/footer&gt;
  </code></pre>
  
  <p>SideBar.css</p>
  
  <pre><code>@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
  
  body {
      font-family: 'Poppins', sans-serif;
      background: #fafafa;
  }
  
  p {
      font-family: 'Poppins', sans-serif;
      font-size: 1.1em;
      font-weight: 300;
      line-height: 1.7em;
      color: #999;
  }
  
  a, a:hover, a:focus {
      color: inherit;
      text-decoration: none;
      transition: all 0.3s;
  }
  
  .navbar {
      padding: 15px 10px;
      background: #fff;
      border: none;
      border-radius: 0;
      margin-bottom: 40px;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .navbar-btn {
      box-shadow: none;
      outline: none !important;
      border: none;
  }
  
  .line {
      width: 100%;
      height: 1px;
      border-bottom: 1px dashed #ddd;
      margin: 40px 0;
  }
  
  i, span {
      display: inline-block;
  }
  
  .wrapper {
      display: flex;
      align-items: stretch;
  }
  
  #sidebar {
      min-width: 250px;
      max-width: 250px;
      /*background: #7386D5;*/
      background: #181f24;
      color: #fff;
      transition: all 0.3s;
  }
  
  #sidebar.active {
      min-width: 80px;
      max-width: 80px;
      text-align: center;
  }
  
      #sidebar.active .sidebar-header h3, #sidebar.active .CTAs {
          display: none;
      }
  
      #sidebar.active .sidebar-header strong {
          display: block;
      }
  
  #sidebar ul li a {
      text-align: left;
  }
  
  #sidebar.active ul li a {
      padding: 20px 10px;
      text-align: center;
      font-size: 0.85em;
  }
  
      #sidebar.active ul li a i {
          margin-right: 0;
          display: block;
          font-size: 1.8em;
          margin-bottom: 5px;
      }
  
  #sidebar.active ul ul a {
      padding: 10px !important;
  }
  
  #sidebar.active a[aria-expanded="false"]::before, #sidebar.active a[aria-expanded="true"]::before {
      top: auto;
      bottom: 5px;
      right: 50%;
      -webkit-transform: translateX(50%);
      -ms-transform: translateX(50%);
      transform: translateX(50%);
  }
  
  #sidebar .sidebar-header {
      padding: 20px;
      background-color: #68696b;
  }
  
      #sidebar .sidebar-header strong {
          display: none;
          font-size: 1.8em;
      }
  
  #sidebar ul.components {
      padding: 20px 0;
      border-bottom: 1px solid #47748b;
  }
  
  #sidebar ul li a {
      padding: 10px;
      font-size: 1.1em;
      display: block;
  }
  
      #sidebar ul li a:hover {
          /*color: #7386D5;*/
          color: #181f24;
          background: #fff;
      }
  
      #sidebar ul li a i {
          margin-right: 10px;
      }
  
  #sidebar ul li.active &gt; a, a[aria-expanded="true"] {
      color: #fff;
      background: #181f24;
  }
  
  a[data-toggle="collapse"] {
      position: relative;
  }
  
  a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
      content: '\e259';
      display: block;
      position: absolute;
      right: 20px;
      font-family: 'Glyphicons Halflings';
      font-size: 0.6em;
  }
  
  a[aria-expanded="true"]::before {
      content: '\e260';
  }
  
  /*sub-menu*/
  ul ul a {
      font-size: 0.9em !important;
      padding-left: 30px !important;
      /*background: #6d7fcc;*/
      background: #68696b;
  }
  
  ul.CTAs {
      padding: 20px;
  }
  
      ul.CTAs a {
          text-align: center;
          font-size: 0.9em !important;
          display: block;
          border-radius: 5px;
          margin-bottom: 5px;
      }
  
  a.download {
      background: #fff;
      /*color: #7386D5;*/
      color: #181f24;
  }
  
  a.article, a.article:hover {
      /*background: #6d7fcc !important;*/
      background: #7386D5 !important;
      color: #fff !important;
  }
  
  #content {
      padding: 20px;
      min-height: 100vh;
      transition: all 0.3s;
  }
  @media (max-width: 768px) {
      #sidebar {
          min-width: 80px;
          max-width: 80px;
          text-align: center;
          margin-left: -80px !important;
      }
  
      a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
          top: auto;
          bottom: 5px;
          right: 50%;
          -webkit-transform: translateX(50%);
          -ms-transform: translateX(50%);
          transform: translateX(50%);
      }
  
      #sidebar.active {
          margin-left: 0 !important;
      }
  
      #sidebar .sidebar-header h3, #sidebar .CTAs {
          display: none;
      }
  
      #sidebar .sidebar-header strong {
          display: block;
      }
  
      #sidebar ul li a {
          padding: 20px 10px;
      }
  
      #sidebar ul li a span {
          font-size: 0.85em;
      }
  
      #sidebar ul li a i {
          margin-right: 0;
          display: block;
      }
  
      #sidebar ul ul a {
          padding: 10px !important;
      }
  
      #sidebar ul li a i {
          font-size: 1.3em;
      }
  
      #sidebar {
          margin-left: 0;
      }
  
      #sidebarCollapse span {
          display: none;
      }
  }
  </code></pre>
  
  <p>ChatStyle.css</p>
  
  <pre><code>body {
      padding: 1px;
      margin: 1px;
  }
  
  #header {
      padding: 20px;
      background-color: #d7e5e4;
      border-bottom: #5f9482 solid 2px;
      color: #1e4638;
      font-size: 24px;
  }
  
  .submitButton {
      background-color: #d7e5e4;
      border: #5f9482 solid 1px;
      padding: 4px;
      cursor: pointer;
  }
  
      .submitButton:hover {
          background-color: #e1e1e1;
      }
  
  .login {
      width: 230px;
      margin-left: auto;
      margin-right: auto;
      padding: 10px;
      border: solid 2px #5f9482;
      color: white;
  }
  
      .login .textBox {
          width: 240px;
      }
  
  
      .login #divButton {
          padding: 4px;
          text-align: right;
      }
  
  .chatRoom {
      width: 230px;
      float: right;
      height: auto;
      margin-left: auto;
      margin-right: auto;
      border: solid 1px white;
  }
  
      .chatRoom .title {
          font-size: 16px;
          font-weight: bold;
          padding: 8px;
          background-color: #d7e5e4;
          border-bottom: solid 1px #5f9482;
          /*font-size: 16px;
          font-weight: bold;
          padding: 8px;
          background-color: #d7e5e4;
          border-bottom: solid 1px #5f9482;*/
      }
  
      .chatRoom .content {
          height: 300px;
          clear: both;
      }
  
          .chatRoom .content .chatWindow {
              float: right;
              width: 230px;
              height: 300px;
              border-left: solid 1px #5f9482;
              overflow-y: scroll;
          }
  
              .chatRoom .content .chatWindow .message {
                  padding: 4px;
              }
  
                  .chatRoom .content .chatWindow .message .userName {
                      font-weight: bold;
                  }
  
          .chatRoom .content .users {
              float: right;
              width: 230px;
              height: 300px;
              overflow-y: scroll;
          }
  
              .chatRoom .content .users .user {
                  display: block;
                  cursor: pointer;
                  padding: 4px;
                  background-color: #f9f9f9;
                  border-bottom: solid 1px #5f9482;
              }
  
              .chatRoom .content .users .loginUser {
                  display: block;
                  padding: 4px;
                  color: gray;
                  border-bottom: solid 1px #5f9482;
              }
  
              .chatRoom .content .users .user:hover {
                  background-color: #e1e1e1;
              }
  
      .chatRoom .messageBar {
          border-top: solid 1px gray;
          padding: 4px;
      }
  
          .chatRoom .messageBar .textbox {
              width: 230px;
          }
  
  .disconnect {
      position: absolute;
      margin: 10px;
      background-color: #ffcbcb;
      padding: 4px;
      border: solid 1px red;
  }
  
  
  .draggable {
      position: absolute;
      border: #5f9482 solid 1px;
      width: 250px;
      display: inline-block;
  }
  
      .draggable .header {
          cursor: move;
          background-color: #e8eff0;
          border-bottom: #181f24 solid 1px;
          color: #fff;
      }
  
      .draggable .selText {
          color: black;
          padding: 4px;
      }
      .draggable .messageArea {
          width: 250px;
          overflow-y: scroll;
          height: 200px;
          background-color: #4cb6cb;
          border-bottom: #4cb6cb solid 1px;
      }
  
          .draggable .messageArea .message {
              padding: 4px;
              color:azure;
          }
  
      .draggable .buttonBar {
          width: 250px;
          padding: 4px;
      }
  
          .draggable .buttonBar .msgText {
              width: 172px;
          }
  
          .draggable .buttonBar .button {
              margin-left: 4px;
              width: 55px;
          }
  
  
  .ui-draggable:not(.ui-draggable-dragging) .ui-widget-content .draggable {
      cursor: none;
  }
  
  
  .bg-light {
      background-color: #e8eff0;
      color: #788188;
  }
  
      .bg-light.dk, .bg-light .dk {
          background-color: #e0eaec;
      }
  
  /*.vbox &gt; section.w-f-md {
      bottom: 60px;
  }*/
  
  
  /* Large desktops and laptops */
  @media (min-width: 1200px) {
  }
  
  /* Landscape tablets and medium desktops */
  @media (min-width: 992px) and (max-width: 1199px) {
  }
  
  /* Portrait tablets and small desktops */
  @media (min-width: 768px) and (max-width: 991px) {
  }
  
  /* Landscape phones and portrait tablets */
  @media (max-width: 767px) {
  }
  
  /* Portrait phones and smaller */
  @media (max-width: 480px) {
  }
  
  Weather.css
  
  .clear {
      clear: both;
  }
  
  .wcard {
      width: 15rem;
      /*max-width: 15rem;
      max-height: 15rem;*/
      height: 10rem;
      /*background: #fff;*/
      /*margin: 2em auto;
      border-radius: .2em;*/
      padding-top: 1em;
      padding-left: 1em;
      padding-right: 1em;
  }
  
  .city {
      margin-top: -1.5em;
      margin-left: -1.5em;
      float: left;
      font-family: Roboto;
      font-size: 1.8rem;
      color: #fff;
  }
  
  .card-img-left {
      width: 7rem;
      float: left;
      margin-top: -2em;
      margin-left: -2em;
              }
  
  .desc {
      width: 7rem;
      float: left;
      margin-top: -0.4em;
      margin-left: -0.2em;
             }
  
  
  .temp {
      float: right;
      font-family: Roboto;
      font-weight: 300;
      font-size: 5rem;
      margin-top: -0.6em;
      margin-right: -1.3em;
      color: #fff;
  }
  
  
  .wind {
      float: right;
      font-family: Roboto;
      margin-top: -13em;
      margin-right: -6.4em;
      color: #fff;
  }
  
  .variations {
      font-family: Roboto;
      font-weight: 300;
      color: #8c8c8c;
      list-style: none;
      margin-left: -2em;
  }
  
  .mph {
      font-size: .8em;
  }
  </code></pre>