CODEWITHSUNDEEP
htmlcss
chapter3
chapter3

Reputation: 994

CSS Change Content Based on Screen Size

There is one effect I once saw from a Flash application which I want to build using CSS - when user resizes the browser window beyond a minimum viewable area (say smaller than 500x800 px), replace the content with a message saying that the viewable screen size is too small

I tried the @media directive which is able to hide the original display content but I am not able to replace it with the message

@media screen and (max-width:900px), screen and (max-height:500px) {
    .wrapper { display: none !important; }
    .notice  { display: block; visibility: visible; }
}

.notice {
  display: none;
  visibility: hidden;
}

Edit: Add HTML Code

<body>
<div class="wrapper">
   <header class="header">My header</header>
   <aside class="sidebar">Sidebar</aside>
   <article class="content">
   <h1>2 column, header and footer</h1>
      <p>This example uses line-based positioning, to position the header
         and footer, stretching them across the grid.</p>
   </article>
   <footer class="footer">My footer</footer>
</div>
<div class="notice">notice</div>
</body>

The above code in the CSS is able to hide the div wrapper when I resize the browser window beyond the given size but fail to show the notice div. When the screen size is of expected dimension, div notice should be hidden

I prefer not to consider any CSS framework at this point. Mainly because I am new to CSS and I also think that is an overkill

P.S. I can only use IE11 - don't ask me why

Upvotes: 1

Views: 6527

Answers (2)

Sylvester
Sylvester

Reputation: 189

Assuming your HTML looks like this:

<div class="wrapper">
     <div class="content">
          <--Your content-->
     </div>
     <div class="notice">
          viewable screen size is too small
      </div>
</div>

You can add the following css.

// Show content for bigger viewpoints
@media screen and (min-width:900px), screen and (min-height:500px) {
.wrapper.content {display:block;}
.wrapper.notice {display:none;}
}

// Show notice for smaller viewpoints
@media screen and (max-width:900px), screen and (max-height:500px) {
.wrapper.content {display:none;}
.wrapper.notice {display:block;}
}

Hope that works for you, or gives you an insight.

Upvotes: 0

cjmling
cjmling

Reputation: 7288

You need to put that @media css below the .notice css.

<div class="wrapper">
  i am wrapper
</div>
<div class="notice">
  i am notice
</div>

.notice {
  display: none;
  visibility: hidden;
}

@media screen and (max-width:900px), screen and (max-height:500px) {
    .wrapper { display: none !important; }
    .notice  { display: block; visibility: visible; }
}

Upvotes: 1

Related Questions