CSS Responsive for iPhone

The year is 2019 and desktop screens seem to be dead! Who looks at their computer screen anymore when you have your phone in the palm of your hand 24/7. But wait, if cell phone screen is so much smaller than a computer screen, how does everything fit? Glad you asked!

CSS responsive design is the process of using @media (min-width: 769px) and @media (max-width: 768px) to control what you see based on the pixel size of your screen. When your screen shrinks down below 769px, then specific formatting made for a smaller screen takes control. Same goes for when your screen is 768px or larger. When editing on the computer, you want to use the developer console, press command+option+j on Mac or right click on your screen and click on the developer tools option from the dropdown that appears. Once in the dev console, you’re going to click on the device toolbar icon at the top left which has a large square inside a smaller square. That will shrink the screen and then you can choose what screen size you want to view the webpage in. I choose iPhone 6/7/8 view because let’s face it, the iPhone is the phone to rule them all.

One other key component of making changes to your application when the screen is resized is the header or toolbar where your menu options are located. Here, when the screen is viewed on a phone, you generally want your toolbar to transform into a hamburger menu. That is the three vertical lines that you can click on that holds your menu options. This is a repository of mine where I created the hamburger menu.

https://github.com/elaitman1/BigeLife-Frontend

Reach out to me at elaitman1@gmail.com if you need help.