I cant make this into mobile view

I tried all possible things i could do, I cant make it mobile responsive,its just big and not properly alligned

This is a college site for a portal and I need it to be mobile responsive,IF its possible try and remove the phone preview only when viewed in Mobile I need it in Desktop view site

<!-- Main Sidebar -->
       <aside class="main-sidebar col-lg-2 px-0">
           <div class="main-navbar">
               <nav class="navbar navbar-light bg-white  border-bottom p-0">
                   <a class="navbar-brand w-100 mr-0" href="#" style="line-height: 25px;">
                       <img id="main-logo" style="width:80%;padding: 5px; position:relative;left: 10%;top: 1%;" src="images/ssn_logo.png" alt="Shiv Nadar University">
                   </a>
               </nav>
           </div>
           <div>
               <ul class="nav">
                   <li class="nav-item"><a class="nav-link" href="club_dashboard.html"><i class="material-icons">home</i><span>Dashboard</span></a></li>
                   <li class="nav-item"><a class="nav-link active" href="#"><i class="material-icons">note_add</i><span>Add New Post</span></a></li>
                   <li class="nav-item"><a class="nav-link " href="index.html" onclick="signOut()"><i class="material-icons">power_settings_new</i><span>Logout</span></a></li>
               </ul>
           </div>
       </aside>
       <!-- End Main Sidebar -->

       <main class="main-content col-lg-10 p-0 offset-lg-2 ">
           <div class="main-navbar sticky-top bg-white">
               <nav class="navbar align-items-stretch navbar-light flex-md-nowrap p-0">
                   <div>
                       <a>
                           <img id="dp_url" src="images/user.png" class="rounded-circle" style="position:absolute;left:82%;top:3.5%; margin-top:5px; width: 3.5%">
                           <p style="position:absolute;left:86%;margin-top:11px; top:3.5%;font-size:13px;"><b id="name"></b></p>
                           <p id="position" style="position:absolute;left:86%;margin-top:6px; top:45%;font-size:10px;"></p>
                       </a>
                   </div>
               </nav>
           </div>

1.I want it to be mobile responsive. 2.If possible remove the phone preview only in the mobile view and not the desktop view

I have uploaded the full code on https://codepen.io/SudhakarJ/pen/oNvVydd