So the great thing that came out of me taking on a self directed project is that I feel like I now know how to make a site responsive.

I have been hearing about responsive web design for years.

I have created responsive pages in the past using other people’s wordpress templates or other templates.

But today was my first time doing one by myself.

In order to do this I had to draw upon some stuff I saw Dave do in his 11 hour CSS tutorial that I watched over 6 nights.

So for now I will just write down the ingredients to making a web page responsive.

Step 1

Remember to put this piece of code about scaling in your html.

meta name="viewport" content="width=device-width, initial-scale=1.0"

Whenever I put the brackets on the angle brackets on the above code in front of meta and after 1.0 , wordpress deletes it. Not sure why but can’t spend any more time on this.

Step 2

Don’t use px for any width that you want to be responsive. Use Viewport Width

Example

 max-width: 80vw;

Step 3

Inspect your code using the code inspect in your browser to see what it looks like on different devices

Step 4

Make adjustments based on what the inspector is telling you using media query

For example, I noticed that one of my buttons had zero space between the buttons and the letters. So For the classes that didn’t look right, I added several media queries for devices up to 576. According to Dave and others mobile devices fall into that 576 range. The media query will look like this```

@media only screen and (min-width: 320px) and (max-width: 576px) {.yourclass {border: 1px solid #ffff00;}

##  Step 5

Put all your media queries at the end 

Somehow the media queries deleted all formatting for my document on desktop. I just put them at the end and that seemed to fix it but I may revisit that topic later to see if that is the right way to fix it. Dave sort of hinted that you should avoid media queries when possible.So I learned responsive. Or at least enough to make one page that I was working on responsive. This is kind of exciting.

This false into the category of things I’ve been watching people do for years and knew bits and pieces but now I know.

1. I spent a good 10 years wondering how Netflix slanted its header
2. Breadcrumbs. Always heard people talking about them but never knew what they were.
3. Other thing I can’t remember right now but will put in later that when I learned it, I said, “aah. that’s what that was.”
4. Now I know responsive\! Yeah\!\!