CSS Change Content Based on Screen Size

Question

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

is .notice html element nested inside .wrapper ? Can you show whats the html structure of this two element ? — cjmling
– cjmling, Commented Oct 9, 2018 at 10:05
Thanks for the comment! I have added the HTML code which is pretty much the same you had in the JSFiddle — chapter3
– chapter3, Commented Oct 9, 2018 at 10:11

cjmling · Accepted Answer · 2018-10-09 10:12:14Z

1

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

answered Oct 9, 2018 at 10:12

cjmling

7,29811 gold badges49 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sylvester · Accepted Answer · 2018-10-09 10:30:38Z

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.

Collectives™ on Stack Overflow

CSS Change Content Based on Screen Size

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related