Omega/Delta/Context - Show/hide Block(s) depending on screen size

The easy solution is disable some blocks via css in global.css (display:none) and re-enable it narrow css file .

Mobile Tools, when ready for D7, would seem to offer a better solution. Or AdaptiveTheme right now.

@mattys also, I am not sure if a Google ad would still be rendered in a block that is hidden.

In my case with Omega, I would like to change eliminate the sidebar and make the content full width for the narrow theme. I should be able to do this with template files and CSS, but it would be ideal if the theme would switch the number of columns used for the regions.

With my limited experience with Omega, it seems awkward for working with something that is a fixed width in the sidebar, such as an advertisement or certain views.

Delta/context is for grabbing information about where you are on the site, not how big the browser is. That's what media queries are for. The right way to do this is simply write different CSS rules in your different style sheets.

Regarding whether things load on display:none, the short answer is yes, they do load. But truly it depends on the browser. One thing that holds true for almost every browser is that image backgrounds of child elements will not be downloaded. For example, if #mydiv has a background and display none, it will still load the background. But if I wrap #mydiv in #mywrap and do the display none on #mywrap instead, most browsers will not download the background of #mydiv unless/until #mywrap is shown.

I don't know the best-integrated solution for handling this more legitimately, but I would imagine it has something to do with using Drupal Image Styles to dynamically create smaller versions and serve them based on what stylesheet is loaded.

@Telfire, I don't agree that the "right way" is to use media queries and CSS exclusively. When working with a site where performance matters, to me, it makes sense to make media queries from code at times; such as not rendering a view for a right column that will not be displayed. But working though this issue on a current site, I would also like to render alternate views for the content for the narrow displays. You experience likely varies from mine, as I do appreciate what you can accomplish with CSS alone.

(post removed by user)

Js, no, there's no reason to use anything but CSS for what the op asked:

"I simply would like to be able to hide/show blocks depending on screen size,"

That's what I was answering. In terms of actually moving the markup to a different place, that's a completely different issue/question, once which I don't know the answer to and am also attempting to find a good solution for.

And matt, of course there's no UI way to do a simple display:none. If you don't know CSS you shouldn't be using Omega. That's the most fundamental, core necessary skill required to develop a theme, and this is a base theme for developers, not a consumer theme. If you want something that you can just change the colors with a web UI, go for some pre-conceived theme that is already close to what you want, and is made for consumers not developers, as you will most definitely need CSS to use Omega.

It's not a feature that would make sense to add. It's one line of CSS to do what you're asking. For what reason would you need a UI. Sounds like this should be marked "works as designed" but I'll leave that to someone else.

As we have screen size numeric data stored in each and every delta, we could develop another supporting module just like 'Context' to disable blocks based on the specified screen sizes. The UI for this module can be as simple as the current admin block UI (i.e.admin/structure/block). Where the sizes will become tabs and within each tab there list of all blocks with disable and enable option as a dropdown, so that we can have control over disabling and enabling the block based on sizes, and it also help websites load time on smaller devices.

This was just my thoughts after reading all the comments on top. Just because I too wanted to do the same.

Thanks,
Anand

I would like to see this as well - use case: extra features on desktop site (e.g. Facebook images, comment boxes etc), and strip these away for mobile as they can significantly impact slow download speeds.

I've tried combining PHP and Javascript in the "Pages on which this PHP code returns true" option, but not with any success as yet...

I think the answer to this question is https://drupal.org/project/context_breakpoint. It has complications of its own though, such as requiring Javascript and cookies to be enabled, need to use auto-reload feature for testing different resolutions in your browser, and caching implications which are explained on the README.txt.

5t4rdu5t,
Did you get context_breakpoint to work for this?

Also, even if there was a solution to this. How would cache be affected?
We are using Varnish, Memcache & APC. Would there be any problems with the cache? If the page cached is a mobile version, what happens when a user using full width screen sees it? Will the cache be of the mobile only? To avoid problems with cache, is the css format the best option?

Anybody figure this out?

I have the same problem. Enabling cache also caches the position of blocks (using blocks & omega) in context. Effectively preventing me from using cache at all.