How do i change the background color of a div with screens smaller than 200px?-CodePudding

I have this code

<div id="changeBackgroundColor"> content <div>

.changeBackgroundColor{
 background-color: green;
}

@media only screen and (width <= 200px){
   .changeBackgroundColor{
      background-color: green;
}

it seems to have some syntax error

CodePudding user response：

I would try:

<div id="changeBackgroundColor"> content <div>

#changeBackgroundColor{
 background-color: green;
}

@media only screen and (max-width 200px){
   #changeBackgroundColor{
      background-color: green;
}

CodePudding user response：

A couple things:

The correct syntax is:

@media only screen and (min-width: 200px)

and if you use . in CSS you're declaring a class. Your div has the id field. Either replace id with class, or . with #

.changeBackgroundColor {
  background-color: red;
}

@media only screen and (min-width: 200px) {
  .changeBackgroundColor {
    background-color: green;
  }
}

<div > content
  <div>

CodePudding user response：

try this

.changeBackgroundColor {
  background-color: black;
}

@media (max-width:200px) {
  .changeBackgroundColor {
    background-color: green;
  }
}

<div >content </div>