This is our new popup.
We will use these to give you the
reasons why we do what we do.



Get ready for some more formR magic!
Close me by clicking on the again.

A very smart programmer once told me that you code your web page for a hand-held device first, the desk top second.

This is probably the most important section. Learn this and you will use these skills to become very accomplished in HTML and CSS. Go out and research "responsiveness."

First let's look at our current web page on an iPhone7 Plus:


- We have 2 problems here.
+ The Menu list is too big to properly display
+ All font sizes are too large

Most all Internet browsers have a wonderful tool called "Developer Tools."

To get to them, you can go to settings > More Tools > Developer Tools

Like below:



Shortcut 1: Right-click anywhere on the screen and pick "Inspect.

Shortcut 2: On most browsers press F12 key.



Example (above image): Click on the drop down and:
+ (1) Select "iPhone IE"
+ (2) Select the little icon
+ (3) Select the "PH Logo"
+ (4) See the information about this element.
Note the "padding: 0px 0pc 0px 54px;

*CSS padding property goes from (top, right, bottom, left)
We set only the left property to 54px* (below picture).
Go look in index.css for "H2 .HeaderLogo." We set the padding-left: 54px;