A small collection of simple pages that can be tested on various devices. Each page has its own stand-alone CSS file for easy copying.
Above left: Variant version for styling a simple vertical stack of elements. Above right: Standard version for styling a simple vertical stack of elements. The only difference is in the media queries.
I have found that using as few declarations as possible for margin and padding is a great help. We often need to adjust margin and padding in the media queries, so the less we need to change, the easier it is. In some cases, for a simple vertical stack of elements, we won't need any left/right padding or margin at all — except in the rule for body.
As a rule of thumb, get the page laid out and behaving as you want it to behave without changing any margin or padding. Then try and see whether you can solve all the issues by changing only the rule for body. If you have a container or wrapper element of some kind on the page, trying styling that next. Sometimes you will find it helpful to add such an element for precisely this purprose. A container can be a div, an article or a section. It might be your grid or flexbox container.
For optimal readability, line lengths should not exceed 60 to 70 characters. The following line helps us test that quickly.
0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789