automate margin on one side to be removed when at mobile breakpoint

r_tist  wrote Am I expected to write media queries for all such details?

Yes. There's is no other way if you want either to get rid of a css attribute or add one.........short of not doing it at all, which a lot of developers seem to do if you look at their mobile layout efforts. It can be tedious work if you are not organised or familiar with how to do it but its quite quick once you get the feel for it.

One tip is to keep all your styling together in your css stylesheet. It makes for easy management. If you keep the css styling altogether and in order you have a good snapshot of what your container/element is doing at various breakpoints. If you splash them about all over the place it will make life more dificult......good managemnet is key when it comes to web-development otherwise you will find yourself with your nose in browser developer tools all day rather than doing any developing. I rarely need the browser development tools as Im organised and write my own code.

/* Desktop */

.wrapper {

width: 75%;

font-size: 20px;

background-color: red;

}

/* Tablet */

@media screen and (max-width:768px) {

wrapper {

width: 90%;

}

}

/* Smartphone */

@media screen and (max-width:480px) {

wrapper {

width: 100%;

}

}