Posted by zoon_unit on January 30, 2012 at 10:44pm
I have a rotating banner on my Omega 3 site, but I don't want it to display when viewed on a mobile phone. (the default mobile first layout) How does one go about "turning off" regions for a particular width layout? (in this case, the default mobile first layout) but display the region in all other layouts? (narrow, normal, wide, etc)
Comments
It's more a question of
It's more a question of hiding rather than turning off
See http://drupal.org/node/1343798
@MrPaulDriver
See the discussion at
See the discussion at http://groups.drupal.org/node/204813#comment-674558
--
http://jmolivas.com/
@jmolivas
I was afraid that was the answer :-)
To me, the biggest problem with display:none is that the content is still downloaded to the mobile device(?), so you gain no speed advantage on a smartphone. What we need is a way to "not request" the content, much like the adaptive image modules that serve up resolution appropriate images based on screen width.
This seems to be the last piece of the Omega puzzle. If we can somehow limit "data heavy" content to phones, then Omega will indeed be the perfect theme for all time. :-)
visibility: hidden
I think that with "display: none" the content still loads BUT if you set it to "visibility: hidden" it doesn't.
I read in the commentary for
I read in the commentary for Flexslider (I can't remember where) that ultimately they'd like to end up with true responsive images, but that they are not there yet.
For now just show your slideshow, but keep the number of slides to a working minimum and use best practice in terms of image compression because that is all you can do. You'll find that the download times can be lived with, especially over 3g.
@MrPaulDriver
I achieved that functionality
I achieved that functionality Responsive Sliders in Omega combining: Flexslider, Display Suite & Client-side adaptive image
-Views
Format:Slideshow | Settings Format: Slideshow Type
Show:Display suite | Teaser
-Display Suite - Teaser
Image Field - Format settings: Adaptive image and setting the "CLIENT WIDTH BREAKPOINT" 320, 480 , 768, etc...
--
http://jmolivas.com/
@jmolivas
Your method sounds very
Your method sounds very interesting. Any chance of a write-up?
@MrPaulDriver
Sure I will do an entry on my
Sure I will do an entry on my blog and attach some screenshot and descrption on each steps to achieve this.
You can see the flexslider example here, I just removed the css for hide on small device port size and now it's showing slider no matter the device size, that means you can decrease window size and verify image element using inspect element to see how image it's replaced based on breakpoint
NOTE: You still can see how the css on flexlider plugin takes care of adding responsive-fluid support to image.
--
http://jmolivas.com/
@jmolivas
Visibility: hidden still
Visibility: hidden still loads the content (check the source of your document).
The difference between visibility:hidden and display:none is that visibility:hidden still effects the layout.i.e it's element still takes up the same space even though it is hidden.
Jon
hmmm... I thought it doesn't
hmmm... I thought it doesn't load the content and when I wanted to "hide" something I was using .class{visibility: hidden, display: none;}.
So what other options do we have? Would javascript do the trick?
Hi everyone, There's nothing
Hi everyone,
There's nothing wrong with mobile.css {display:none} and normal.css {display:block} for example. I do that on mine as I feel a slider on a mobile is so very pointless and there is no significant slowdown. I use 3 x slides with images 960px x 300px.
Works ok and I think it's a valid solution.
Sam.
Stuff that isn't for mobile
Stuff that isn't for mobile shouldn't be getting sent to a low-bandwidth mobile device in the first place. That's not the role of media queries either. CSS controls layout, not what gets sent.
See how we do it at http://groups.drupal.org/node/208778#comment-690433
:)