All righty, welcome back. Now that we've gone through the process for making media queries for a large smartphone, I will give you two options moving forward, I will upload two project versions, they will both have all the media queries I normally use in the order that I use them. One will be blank and one will be complete. The blank media queries will have more than is necessary for the very simple page we've created, but they're a good reference moving forward. You can choose to use my final version and then move along to the next section, or challenge yourself to figure it out on your own in the dev tools. I'd recommend the second option because you'll need to get comfortable with this process moving forward.

So included there are blank media queries for most major smartphones, both vertical and horizontal, iPads, both vertical and horizontal and also for monitors and laptop's factoring in different amounts of browser UI. So for example, in this case, we have our bookmarks bar, which is an additional 25 pixels to when we do not have our bookmarks bar. And it will also look different still in full screen because we're removing the browser UI up here, which takes up space. So, in my media queries, I didn't end up using any of the screen variations for no Bookmarks Bar because it was so close that it just fit properly as it was. Keep in mind that for something like 1366, with where you have an exact with, you'll need to copy styling from previous queries because they won't apply to this exact resolution. The same goes for iPads as well.

You'll need to copy over queries from other components. When I finished the media queries for this project, you can see that there are a lot of differences In this case, we're looking at the iPad before and after in the vertical orientation, we needed to fix how the video was so that it filled up the whole screen. In this one, you can see we needed to make our ABOUT SECTION card wider. And we also needed to reposition it into the center of the page. And again, in our contact section, our video needed to be fixed so that it filled up the whole screen instead of just being down in the middle there. An example that we had to change on our iPad horizontal was our project section, we wanted to make two rows of three just like we have on our laptop or desktop size.

So we needed to decrease the margins on the left and right. In order to accomplish that. When you're working on your own project, it might need more or different media queries depending on how much you've changed. You can continue using similar methods and testing and the depth To make it look perfect when you finished or downloaded the responsive design media queries, join me in the last section where we will perform some final optimizations, and then finish up by hosting our project online for free with Firebase. All right, I'll see you on that one. Bye for now.