Question

I want to implement page footer. The main idea here is that text inside footer should be hidden in the case when window become narrow, but if window become wide enough than all the text inside footer should be visible. Could you help me, please?

For example, if I have such markup then text is always hidden even if window become wide enough. But it should be better if text inside footer will be visible too.

<style type="text/css">
#topbar { width: 100%; }
#topbar div { white-space: nowrap; overflow: hidden; width:70px; text-overflow: ellipsis;}
#topright div { text-align: right; }
</style>
<table id="topbar">
<tr>
  <td><div>Item1Item1</div></td>
  <td><div>Item2Item2Item2</div></td>
  <td><div>Item3Item3Item3Item3</div></td>
  <td><div>Item4Item4Item4Item4</div></td>
  <td><div>Item5Item5Item5Item5Item5Item5Item5</div></td>
  <td id="topright"><div>ItemRightItemRightItemRight</div></td>
</tr>
</table>

Thanks in advance.

Answer 1

You could use CSS3 media queries for that. See this documentation for width: http://www.w3.org/TR/css3-mediaqueries/#width

What you basically do is define two or more different stylesheets (partial at least) for different screen widths (e.g. smaller/wider than 800px), doing something like:

.large-content{
    display: none;
}
@media screen and (min-width: 800px){
    .large-content{
    display: block;
    }
}

Google should also guide you to a lot of helpful resources regarding this topic.