CSS CSS Layout CSS Media Queries What are Media Queries?

Luke Den Hartog
Luke Den Hartog
3,989 Points

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

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; } }

2 Answers

Emmanuel Oduntan
Emmanuel Oduntan
10,368 Points

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

juan gomez
juan gomez
1,159 Points

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.