title: How do I get my website to look the same on mobile as it does in a resized Google Chrome Window?
body: <p>I had to adapt an HTML website to run on MediaWiki. The website is here at <a href="http://2016.igem.org/Team:UrbanTundra_Edmonton" rel="nofollow">http://2016.igem.org/Team:UrbanTundra_Edmonton</a> . There were many bugs at first, as MediaWiki basically confines you into a text editor to do all your work, versus just having .HTML files on a server. However, I was able to fix most of the bugs. The only, and perhaps most crippling bug is the responsiveness of the website.</p>
  
  <p>For example, if you resize the website in a Google Chrome window, the website behaves and looks fine. However, when you open the same website on a mobile phone, the nav-toggle moves off screen, and the general layout falls apart. Viewing the website through the different mediums will give a better understanding compared to my lackluster description.</p>
  
  <p>This was actually a bigger issue before I decided to come here for help. I basically used 'Inspect Element' in Chrome to change a bunch of padding and margin values to get everything looking nice. And truly, in a resized Chrome window, it looks fine. </p>
  
  <p>Then I tried using Chrome's mobile emulator (that's built into the Dev Tools) and using my trial and error method to no avail. </p>
  
  <p>I was wondering if anyone could help me out, or at least give me some tips on how I could take was is seen on a resized Chrome window, and display that on mobile?</p>