How to adjust CSS for different screen sizes?

There are times when you wanted to use CSS code for different screen sizes. For example, you want to display the tagline normally on PC, but you want it to be hidden when viewing on a mobile.

1. Use https://designmodo.com/responsive-test/ or http://responsivepx.com/ for simulating the device viewport. You can also use the Chrome's Developer Tools for the job.

2. Use the Chrome's Developer Tools or Firebug on Firefox to inspect the elements you want to adjust.

3. Use CSS media queries to create the CSS for a particular screen size. For example:

@media only screen and (max-width: 768px) {
    .tagline {
        display: none;
    }
}

The code above will hide the tagline on any 768px screens and below.

For more information about CSS media queries, please see: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

4. You can enter any custom CSS code into the "Additional CSS" section that is in the theme customizer.