Michel Michel - 14 days ago 5
CSS Question

Display contents based on CSS

This may be a beginner question concerning CSS.

Is it possible to decide what to to print (dispay) using CSS and media queries?

Say for example if my window (or device screen) is smaller than 500 pixels then dispay "Hello!" otherwise dispay "Guten Tag!"

What I have found shows how to decide some display attribute (color or ...), never the contents itself.

Answer

You'd need to have two elements, one for screen bigger than 500 and one for less than 500. Then use media queries to show/hide one on them DEMO: http://jsbin.com/pizosehire/edit?output

HTML

<div class="large">Hello</div>
<div class="small">Guten Tag</div>

CSS

.small {
  display: none;
}

@media (max-width: 500px) {
  .large {
    display: none;
  }
  .small {
    display: block;
  }
}
Comments