When I enter
@media print {
section {
min-height: auto;
}
}

it does nothing. What did I do wrong!?

Question

Why does my media print not working?
 {
box-sizing: border-box;
}
html  {
font-size: 18px;
}
header  {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #294969;
  color: ghostwhite;
  padding: 10px 15px;
  border: 12px solid orange;
  border-bottom-color: #cf7919;
}
article  {
  margin-top: 3rem;
}
section  {
  height: 100vh;
  padding: 1rem;
  border-bottom: 2px dotted #666;
  background-color: azure;
}
.small-img {
  float: left;
  width: 300px;
}
.clear  {
  clear: both;
}
interesting-banner  {
  position: sticky;
  top: 0;
  padding: 10px 15px;
  border: 12px solid lightsalmon;
  margin: 0 -8px;
  background: firebrick;
  color: white;
  font-weight: bold;
}
a  {
  width: 400px;
}
.hide  {
  display: none;
}
figure  {
  position: relative;
}
figcaption  {
  position: relative;
  width: 100%;
  bottom: 20%;
  background-color: yellow;
    text-align: center;
}
aside img, #bio, figcaption  {
  width: 100%;
  max-width: 480px;
}
bio  {
  padding: 2rem;
  border: 5px solid tomato;
  background-color: mistyrose
}
footer  {
  width: 200px;
  padding: 4px;
  border: 2px solid #ffa949;
  margin: 30px auto 15px;
  color: #294969;
  font-size: small;
  text-align: center;
}
ul li  {
  display: inline-block;
  width: 30%;
  padding: 10px 0;
  background-color: yellow;
  text-align: center;
}
@media print {
  section {
    min-height: auto;
  }
}

Emmanuel Oduntan · Accepted Answer

To see the effects of the media query on print devices use the ⌘ + P on Mac or Ctrl + P on Windows

Daniel Ruus · Answer

I had the same issue. I changed from min-height to only height and then it worked. Like this:
@media print {
  section {
    height: auto;
    /* color: red; */
  }
}
Also tried to add a textcolor just to make sure that the media query was working, to narrow down the troubleshooting.

Michael Lugo · Answer

Media rules are not working on the print preview as stated beforehand. Without timely answers we can't really keep moving forward in learning.

juan gomez · Answer

I'm having the same issue using the "at-rule" for anything on workspace when adjusting the screen sizes on inspection.
I also downloaded the workspace and opened the project in my VSCode editor and still having same issue.
I'm assuming I have written something wrong for the "@media" rules to not work for some reason.
Hope we get an answer soon.

Welcome to the Treehouse Community

Looking to learn something new?

Luke D

Luke D

When I enter @media print { section { min-height: auto; } } it does nothing. What did I do wrong!?

interesting-banner {

bio {

4 Answers

Emmanuel Oduntan

Emmanuel Oduntan

Daniel Ruus

Daniel Ruus

juan gomez

juan gomez

Michael Lugo

Michael Lugo