How do I get div ID selector working in HTML?-CodePudding

<div id="nofries">
  <h1 >CRAZY GREEKS</h1>
  <h3 >GREEK FOOD, SUBS &amp; PIZZA</h3>
</div>

This is my div ID, but my css isn't picking it up. I had it under class and that didn't work either. I even tried specifying it with "div.nofries" when it was a class; nothing. Any ideas?

@media only screen and (max-width: 900px) {
    div#nofries {
        display: contents !important;
        text-shadow: -3px 2px 2px rgba(0, 0, 0, 0.63);
        margin: auto;
    }
}

Also, does it matter that I'm using bootstrap? The way to use media queries in BS are too darn confusing for me so I prefer this way. Could it be interfering?

CodePudding user response：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
 
  <style>
   
.tblrow{
display: flex;
background:#ccc;
padding:10px;
}
</style>
</head>
<body>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
 
  <style>
 @media  screen and (max-width: 900px) {
    div#nofries {
        display: contents !important;
        text-shadow: -3px 2px 2px rgba(0, 0, 0, 0.63);
        margin: auto;
    }
}
</style>
</head>
<body>
<div id="nofries">
  <h1 >CRAZY GREEKS</h1>
  <h3 >GREEK FOOD, SUBS &amp; PIZZA</h3>
</div>

</body>
</html>


</body>
</html>

CodePudding user response：

Just try it with the declaration:

#nofries {
        display: contents !important;
        text-shadow: -3px 2px 2px rgba(0, 0, 0, 0.63);
        margin: auto;
    }
}