CODEWITHSUNDEEP
htmlcss
Aurther
Aurther

Reputation: 41

How do I resolve this CSS display issue?

I have an issue with CSS display:none for mobile queries as exemplified in code below. When screen width is reduced to 600px the @media query rules remove a div that should be displayed.

div .mobile-content is being removed together with div .desktop-content under @media rules. The mobile screen becomes blank as both divs are removed instead of .desktop-content

I suspect its a simple issue...how do I fix this?

Here is the code...

.desktop-content {
  background-color: black;
  color: white;
  font-size: 28px;
}

.mobile-content {
  display: none;
}

@media(max-width:600px) {
  .mobile-content {
    background-color: green;
    color: white;
    font-size: 28px;
  }
  .desktop-content {
    display: none;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Desktop & Mobile</title>
</head>

<body>
  <div class="container">
    <div class="desktop-content">
      <p>This is desktop content only</p>
    </div>
    <div class="mobile-content">
      <p>This is mobile content only</p>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Views: 116

Answers (3)

Rishab Tyagi
Rishab Tyagi

Reputation: 926

You can use an extra media query if it is okay for you or just add display:block; to your .mobile-content{} inside @media (max-width:600px){} as suggested by the other answers.

It will solve the problem. The code will be:

@media all and (min-width:600px){
  .mobile-content{
    display:none;
}

}

.desktop-content {
  background-color: black;
  color: white;
  font-size: 28px;
}



@media all and (max-width:600px) {
  .mobile-content {
    
    background-color: green;
    color: white;
    font-size: 28px;
  }
  .desktop-content {
    display: none;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Desktop & Mobile</title>
</head>

<body>
  <div class="container">
    <div class="desktop-content">
      <p>This is desktop content only</p>
    </div>
    <div class="mobile-content">
      <p>This is mobile content only</p>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Antony Sanders
Antony Sanders

Reputation: 122

Well the issue isnt that both are being removed. It's that the mobile isnt being displayed in the first place. Your code should look something like this:

.desktop-content {
  background-color: black;
  color: white;
  font-size: 28px;
}

.mobile-content {
  display: none;
}

@media(max-width:600px) {
  .mobile-content {
    display: block;
    background-color: green;
    color: white;
    font-size: 28px;

  }
  .desktop-content {
    display: none;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Desktop & Mobile</title>
</head>

<body>
  <div class="container">
    <div class="desktop-content">
      <p>This is desktop content only</p>
    </div>
    <div class="mobile-content">
      <p>This is mobile content only</p>
    </div>
  </div>
</body>

</html>

Upvotes: 0

Vladimir Savitski
Vladimir Savitski

Reputation: 81

Add display: block; under the font-size: 28px; like this

@media(max-width:600px) {
  .mobile-content {
    background-color: green;
    color: white;
    font-size: 28px;
    display: block;
  }
  .desktop-content {
    display: none;
  }
}

Upvotes: 0

Related Questions