You doubt the media!

Question

Suppose you have a sheet of CSS reasonably large and once the stylization of the HTML, I’ll do the responsive part of the page.

My problem is when I start using medias query, all the stylization and programming I did for the page elements begin to interfere in the media query which I am creating, getting very difficult to do things. I have to do most of the codes again within the media query And it’s very complicated. This is because you always have to try to figure out why the codes are not working right, having to redo 50% of everything inside the query.

I wanted to know if you have a better practice so that this doesn’t happen and you have to write and change what I really want to change in media query

Answer 1

One tip I give you is to try to plan your website/ system to the maximum before creating it, because this way you will be able to better determine the paddings, margins, floats, flexboxs, etc, causing when adjusting in the medias querys, not so much "re-work".

Use for example the following medias querys:

// Dispositivos extra small (telefones em modo retrato, com menos de 576px)
// Sem media query para `xs`, já que este é o padrão, no Bootstrap.

// Dispositivos small (telefones em modo paisagem, com 576px ou mais)
@media (min-width: 576px) { ... }

// Dispositivos médios (tablets com 768px ou mais)
@media (min-width: 768px) { ... }

// Dispositivos large (desktops com 992px ou mais)
@media (min-width: 992px) { ... }

// Dispositivos extra large (desktops grandes com 1200px ou mais)
@media (min-width: 1200px) { ... }

Always think about the minimum width of each of them, before reaching the "breakpoint", because this way, you do not make several adjustments within a media query for after you resize a little more, find that you need another adjustment, an example: @media (min-width: 1200px) { ... }, you use 1200px as the basis for your responsiveness and not 1920px for example, so by adjusting to 1200px which is the breakpoint, you will know that all other resolutions above that will be working.

Bonus Tip: I don’t know if you use some kind of CSS framework like Bootstrap for example, but I highly recommend the use, even more because of the question of Grids and other classes that already help in the responsiveness in the own writing of HTML code, without you having to work so hard with multiple lines of code later via pure CSS.

I hope I helped, strong hug and success!