Question

I want to know how this theme gets the effect of the items in the lower right disappearing as the screen gets smaller.

http://themeforest.net/item/jr-photography-wordpress-theme/full_screen_preview/1163891?ref=takeaction

I have items in the lower right but when the screen is too small They move down instead of disappearing like this. Any comments or links how to get this effect would be great! Thank you.

Answer 1

Not media but rather CSS floating solution

I haven’t checked source code of the particular site, you’re linking, but I’ve created a simple CSS solution that hides right-hand side elements when there’s no more space for them because of the left hand side elements.

Here is a JSFiddle. Resize the window width (or drag the columns in to resize content quadrant width) so the two elements become too wide for the container width. The right-content will automatically disappear.

What it does?

You have footer container with two additional containers, floated left and right. All three of them must define the same height while:

1. footer defines overflow: hidden so anything that goes beyond lower visible viewport will not be displayed.
2. other two are then just floated within to left and right

Floating then makes care of everything. When there’s not enough space to accommodate floated elements by with they start to render underneath where there’s enough space. But displaying underneath hides them because container element has a limited height.

<div class="footer container">
  <div class="left container">left content</div>
  <div class="right container">right content</div>
</div>

​And simple CSS (including just relevant settings):

.container {
    height: 2em; /* all containers have the same height */
}

.footer {
    overflow: hidden;
}

.left {
    float:left;
}

.right {
    float: right;
}
​