Responsive Web Design - How to inspect CSS code

When starting with creation of a website one of the best practices is to follow 'mobile-first' design approach. Unfortunately, this is not always possible. In the end you have to make some changes in your css code in order to get a fully responsive website to eevery screen size.

The most convenient way to open webtools in your browser is by using F12 key on your keyboard. There are other ways for doing the same but this is the easiest one. Press the F12 when your website is open in the browser.

The most convenient way to open webtools in your browser is by using F12 key on your keyboard. There are other ways for doing the same but this is the easiest one. Press the F12 when your website is open in the browser.

In the top-left corner of your screen click on the marked icon in the picture to select the inspect tool (CTRL-SHIFT-C). The color of the icon will change.

Select the screen size that you want your page to fit properly on. Start from the top of your webpage and hover over each element until you identify the one you wish to change. Click on that element and its styling will be automatically shown on the 'styles' column. 

As you can see, the property for the selected element on the page, gets in view. Now you are ready to temporarily change values of its properties or you can turn off and on each property to see changes immediately.

The 'padding' property is turned off, and you can see the h2 element  change on the page. Let's say that it is what you want.

Hover over the target element in the css section of the devtools and right-click on the mouse. In the pop up dialog window click on the option "Copy rule".

Open your styles.css file in a code editor (e.g. VSC) and paste the copied rule in the media query with target maximum screen size. Delete the properties that don't change and set the target property to convenient value.

Use Alt-Tab to switch back to your devtools open in the browser. Now you can see clearly change that you have made. Use the same approach for all elements tha must be change in order to fit well to the desired screen size.