Firefox and all Chromium browsers (Google Chrome, Edge, …) all have great tools to help you with that. First and foremost, both have a developer tools bar (activated by pressing either Ctrl+Shift+I, F12 or by going into the browser menu and under the section “More tools”) where you can highlight certain elements and further inspect them. You will see all the applied style rules on the right-hand side in the standard interface. This way you can check whether certain rules are active or not and where they come from.
Furthermore, these developer tools include a device toolbar or responsive design mode, activated by either clicking the small phone and tablet icon on the developer toolbar or by pressing Ctrl+Shift+M. When activated, your actual browser window is sectioned off from the rest of the browser and can be either set to some of the preset phone display sizes, which include some of the latest phone models, or be resized manually in the responsive mode like any normal window. The benefit from doing resizing this way is that the toolbar shows you how big the “display” is regarding pixel size, which helps immensely with implementing rules for different screen sizes.
If you want to test the look and feel on an actual device, you can have some your personal mobile phones or tablets connect to them via the local network. I assume you are already running some kind of local web server like XAMPP. Then you can easily figure out your local IP with some simple commands for the command line tools/terminals (e.g. ipconfig on Windows, nettop on MacOS, ifconfig on Linux).
Solution:
This is a bug which crops in when within the layout, you set the parent container's overflow property to “auto” and placing a relatively positioned item within it. This relatively positioned item tends to violate the parent element's boundaries and overflows. The simplest fix to this bug is to position the parent container relatively.
Use Boostrap, it introduces screen size dependent css classes. Boostraps grid divides the screen in 12 units. With this example you can have a screen layout that automatically stacks the divs if the screen width is below 768px.
<div class="container-fluid"> <div class="row">
<div class="col-sm-4" style="background-color:green;">.col-sm-4</div> <div class="col-sm-4" style="background-color:red;">.col-sm-4</div> <div class="col-sm-4" style="background-color:green;">.col-sm-4</div>
</div>
</div>
While constant monitoring and optimizing of the code is always a good idea, there is also a process called “Minification” to do so. During a project for a university course I had to use the service minifier.org to reduce the file size of my js- and css-files. It reduces unnecessary text, like comments or whitespaces from those files and even optimizes Javascript code according to common programming optimization patterns.