Using max-width AND min-width @media queries in same css doc

HTML-CSS
1

Is this ok to do or is it a sign I haven’t thought my code through well enough?

2

Your question is vague since we’re not sure what you’re trying to do.

Have you put this as a search query and didn’t find what you were looking for? I mean, I did and got quite a few good hits that explain why you would do this so without knowing what you’re trying to do any answer would be speculation.

3

I didn’t search it. I guess I should have.

I have a desktop first design(that’s maybe an issue unto itself) where the main container has a max-width of 1200px.

When the screen width gets down to 650px I make all the main sections/elements 100% width.

But the thing is for smaller screens(650px and below) I want a background behind one of the sections within the main page container. At greater than 1200px with I want a background behind the main page container so that it shows on either side of the main container.

Here it is:

https://codepen.io/RutherfordTheBrave/pen/qBNMvOv

EDIT: I said it wrong. I want to show the background within the container at under 1200px, when the main container is maxed out.

It seems to be working how I want it to, I just don’t know if it’s bad code.

4