Last updated on October 1, 2016

Recently, I had the opportunity to pair with two fantastic developers: Ben @benjaminma and Ian @IanDCarroll at FullStackLA. This was also my first time at FullStackLA and it was great experience.

Ian had been working on a static website which lists and displays all the local meetups in Los Angeles. The challenge was simple: improve the website to look better on a mobile phone.

The website looks good on a desktop browser, but the issue came when the display is narrow (such as on a mobile browser), the info panel looks messy:

Ben suggested that we should add a toggle button to display and hide the info panel (the panel on the right that lists the meetups) so that it won't get in the way when people want to see the map behind it. This task wasn't hard thanks to jQuery: we simply wrapped the info panel with a parent div and added a toggle button:

<div id="info-wrapper">
  <button id="info-toggle-button" onclick="$('#info').toggle()">Toggle info</button>
  <!-- the original info panel here... -->
</div>

After styling the toggle button a bit, we got a functioning good-looking toggle button:

However, we still haven't solved the messed info panel issue on a narrow display. We identified the issue that the info panel was always 38% width of the display width, which is too narrow on a mobile display. For this reason, we set a minimum width for the info panel:

min-width: 280px;

However, this minimum width in absolute length unit causes problems on a small screen phone such as 3.5in iPhone display: 280px is just too wide. To make it even work on a super small display, Ben proposed a dramatic move:

@media (max-width: 280px) {
    #info {
        min-width: 90vw;
    }
}

These few lines set the min-width to be 90vw only when the width of the view port is smaller than 280px. Now the page is perfectly ready for various display widths: