Using media queries

[asasass]

How would I use media queries?

for the margins?

Question 1)
@media only screen and
@media screen

Which should be used?

Question 2)

Should I be using both min and max for both?

@media screen and (min-width: 600px) and (max-width: 900px) {
  .curtain {
    margin: auto auto 50px;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .curtain {
    margin: auto auto 50px;
  }
}

My attempt: https://jsfiddle.net/jqu5f19h/2/

It didn’t work.

Between 1280 & 682:

It should stay at this margin.
margin: auto auto 50px;

Between 682 & 300

It should stay at this margin:
margin: auto auto 20px;

.curtain {
  margin: auto auto 50px;
  max-width: 640px;
  border: 21px solid;
  border-radius: 12px;
  border-color: #000 #101010 #000 #101010;
  position: relative;
}

@media screen and (min-width: 682px) and (max-width: 1280px) {
  .curtain {
    margin: auto auto 50px;
  }
}

@media screen and (min-width: 300px) and (max-width: 682px) {
  .curtain {
    margin: auto auto 20px;
  }
}

[SamA74]

@asasass

Which should be used?

There is no need for only.

@asasass

Should I be using both min and max for both?

No, don’t use both min and max, use one or the other.

@asasass

min-device-width:

Don’t use device-width, just min-width or max-width.

@asasass

margin: auto auto 50px;

Here you are setting margin-top: auto; margin-right: auto; margin-bottom: 50px; is that what you intended?
Using the margin shorthand with more than two values sets: top, right, bottom, left. So there you set the top, right and bottom.
Using just two values it sets: vertical margins (top & bottom), horizontal margins (right & left).

[RyanReese]

@SamA74

Here you are setting margin-top: auto; margin-right: auto; margin-bottom: 50px; is that what you intended?

Technically, when 3 values are used, it’s top / left & right / bottom
so it’s

margin-top: auto;
margin-left: auto; margin-right: auto;
margin-bottom: 50px;

@SamA74

Using the margin shorthand with more than two values sets: top, right, bottom, left.

As such, this logic only applies when 4 values are set (it’s like a clock)

[PaulOB]

@SamA74

Don’t use device-width

Yes its deprecated now and shouldn’t be used at all.

device-width - CSS: Cascading Style Sheets | MDN

[asasass]

Does this make sense at all, and is there a reason why this didn’t work?

https://jsfiddle.net/jqu5f19h/2/

It didn’t work.

Between 1280 & 682:

It should stay at this margin.
margin: auto auto 50px;

Between 682 & 300

It should stay at this margin:
margin: auto auto 20px;

.curtain {
  margin: auto auto 50px;
  max-width: 640px;
  border: 21px solid;
  border-radius: 12px;
  border-color: #000 #101010 #000 #101010;
  position: relative;
}

@media screen and (min-width: 682px) and (max-width: 1280px) {
  .curtain {
    margin: auto auto 50px;
  }
}

@media screen and (min-width: 300px) and (max-width: 682px) {
  .curtain {
    margin: auto auto 20px;
  }
}

[PaulOB]

@asasass

It didn’t work.

The first rule is pretty useless because the default margin is already set in the block above it. Setting it twice doesn;t make it twice as effective

All you need is this.

.curtain {
  margin: auto auto 50px;
  max-width: 640px;
  border: 21px solid;
  border-radius: 12px;
  border-color: #000 #101010 #000 #101010;
  position: relative;
}
/* no need for this first one because its already set above for everything
@media screen and (max-width: 1280px) {
  .curtain {
    margin-bottom: auto auto 50px;
  }
}
*/

@media screen and (max-width: 682px) {
  .curtain {
    margin-bottom: 20px;
  }
}

At less than 682px it will be 20px bottom margin.

Greater than 682px will be a 50px margin.

[PaulOB]

@asasass

It didn’t work.

It is working with your code but as I said most of it was unnecessary.

[asasass]

Your way was better.