2

I have been looking into responsive design using Omega subthemes. It seems very powerful when combined with the context and delta modules. However, I am having difficulty understanding how to selectively remove parts of a page in a responsive website. When I say remove, I don't mean hide, but actually prevent the specified content from rendering (that way a mobile browser doesn't have to waste time downloading content which is never displayed).

Omega provides the ability to apply different CSS to a page based on browser size (by using media query tags). Delta and context modules to be used to change the arrangement of page elements, or even remove page elements, based on certain conditions. However, I have not been able to work out how to combine the two.

For example, is it possible to, not only apply different CSS at different browser window sizes, but also prevent certain page content being rendered at the same time?

I have not been able to find any information on this. I am guessing since page content is rendered on the server side and media queries work on the client side, that it is probably not possible. I would be interested to know if anyone has any ideas on how I could achieve this.

Benjen
  • 2,835
  • 5
  • 28
  • 42
  • 2
    I'd love to be proven wrong but I've just spent a week researching the same thing, and there's just no nice way to do it. The problem is nothing to do with Drupal, you need to imagine how you would do this for _any_ website. Media queries happen on the client side, so the page content already needs to be present unless you implement some sort of media-query-based AJAX block delivery system. Or something crazy with Varnish, cookies and ESI. If those aren't an option, save yourself the research time and just hide the blocks with CSS. For reference: http://drupal.stackexchange.com/questions/50850 – Clive Dec 03 '12 at 11:18
  • It looks like it might be possible to use the mobile_tools module, in combination with Browscap, to switch Omega theme layouts via the Delta and Context modules. Haven't been able to test this yet. But I guess it is theoretically possible. – Benjen Dec 05 '12 at 12:59
  • It's theoretically possible using _browser detection_, sure, but not using plain ol' media queries without some serious effort. Or at least that's what I've found so far, if someone could prove that wrong it'd be great! – Clive Dec 05 '12 at 13:00

2 Answers2

1

You should take a look at the Context Breakpoint module. It allows you to set Context conditions based on the end-users browser size, aspect ratio and resolution.

http://drupal.org/project/context_breakpoint

Desmond Morris
  • 1,056
  • 1
  • 9
  • 13
0

Not sure if works for you but when I do a display: none - everything disappears and the surrounding divs shuffle nicely:

@include breakpoint($phone){
      .l-header_search {
       display:none;
       } 
}
Jonathan
  • 1