Menu icon Foundation
Hide by Screen Size issues

I'm having trouble making sense of the classes used to hide by screen sizes. I want to hide captions in my orbit slider on small devices because the images I am using are very very panoramic and the caption covers up about a third of the image when displayed on iphone.

I tried "hide-for-small-only" which seemed to be the logical choice because I want the caption to disappear on small screens. However, it works in reverse. Hide-for-small only removes the caption from my desktop monitor (21" 1680x1050 LCD, but displays the caption on my iPhone.

I interpret "hide-for-small-only" to mean: Hide this item on only small screens and allow it to display on all other screens.

"hide-for-touch" has no affect either. The caption still displays on iPhone.

I'm inserting it in this portion of my code:

Is anyone else having this issue? Am I misunderstanding the use of the class?

 hide for small only removes it from desktop but displays it on iphone which is the opposite of the intent.
 
 <li>
    <img src="/assets/images/wideimage_01.jpg" alt="slide 1" />
    <div class="orbit-caption hide-for-small-only">
    Caption One.
    </div>
  </li>
  
  also tried the following
  
   <li>
    <img src="/assets/images/wideimage_02.jpg" alt="slide 1" />
    <div class="orbit-caption hide-for-touch">
    Caption One.
    </div>
  </li>
            

         

Foundation 5visibility classesOrbitcaptions

I'm having trouble making sense of the classes used to hide by screen sizes. I want to hide captions in my orbit slider on small devices because the images I am using are very very panoramic and the caption covers up about a third of the image when displayed on iphone.

I tried "hide-for-small-only" which seemed to be the logical choice because I want the caption to disappear on small screens. However, it works in reverse. Hide-for-small only removes the caption from my desktop monitor (21" 1680x1050 LCD, but displays the caption on my iPhone.

I interpret "hide-for-small-only" to mean: Hide this item on only small screens and allow it to display on all other screens.

"hide-for-touch" has no affect either. The caption still displays on iPhone.

I'm inserting it in this portion of my code:

Is anyone else having this issue? Am I misunderstanding the use of the class?

 hide for small only removes it from desktop but displays it on iphone which is the opposite of the intent.
 
 <li>
    <img src="/assets/images/wideimage_01.jpg" alt="slide 1" />
    <div class="orbit-caption hide-for-small-only">
    Caption One.
    </div>
  </li>
  
  also tried the following
  
   <li>
    <img src="/assets/images/wideimage_02.jpg" alt="slide 1" />
    <div class="orbit-caption hide-for-touch">
    Caption One.
    </div>
  </li>
            

         

This post has been closed. No new replies can be added.

Fredric Tillberg over 5 years ago

You can always set your own @media property:

@media (min-width: *px) {
    .orbit-caption {
        display: none;
    }
}

"*px" would be the absolute minimum width in pixels that you want your captions to show.
Let's say you want to hide the captions if the window width is 599px or less, then you would set the "min-width" to 600px.

Marc McGee over 5 years ago

Wow Fredric. That was fast. Thanks for the response. I'll give this a try.

Coming from Foundation 3, all this small, medium, x large... etc. is very confusing. Too many options!

I really appreciate your fast feedback. Thank you.

Fredric Tillberg over 5 years ago

No such thing as too many options!!! =) The more, the merrier - right?
Hope it works out for ya!

Also;
If you want to add more @media tags with the min-width property, be sure that you sort them lowest to highest.
Supposing you wish to add a different styled caption for Tablet vs. PC and hide it completely for Mobiles.

This will not work:

(See Fiddle below for details).

@media (min-width: 1150px)  {
    /* 
        Add code here...
    */
}
@media (min-width: 980px)  {
    .orbit-caption { display: block; }
    .tablet-caption { display: none; }
}
@media (min-width: 768px)  {
    .orbit-caption { display: none; }
    .tablet-caption { display: block; }
}

It would simply load the 768px @media constantly.

Reversed on the other hand... Will work just fine:

(See Fiddle below for details).

@media (min-width: 768px)  {
    .orbit-caption { display: none; }
    .tablet-caption { display: block; }
}
@media (min-width: 980px)  {
    .orbit-caption { display: block; }
    .tablet-caption { display: none; }
}
@media (min-width: 1150px)  {
    /* 
        Add code here...
    */
}
Fiddle

http://jsfiddle.net/P3bble/L7Uk8/2/

Just a little something that I found out the hard way. Spent a lifetime trying to figure out why my containers weren't scaling properly. =P

Marc McGee over 5 years ago

This is more than helpful. Much appreciated. Will give it a try.

Fredric Tillberg over 5 years ago

For future readers who might want to know what this is all about:

I've updated the Fiddle (http://jsfiddle.net/P3bble/L7Uk8/2/) with a detailed "HOW IT ALL WORKS" comment. (It's a TL;DR... You have been warned).

Snippet

The important part:

Here's the key to how this works; The LAST value to return true is the one we'll use.

Andrew Patterson over 5 years ago

When using Foundation's built-in visibility classes, an item will display unless there is at least one class that hides it. Then it will be hidden. For example, show-for-small-only is defined as "display: none;" for all media queries greater than small. For small screens it will be "display: inherit;" which means it will display unless there is something else like hide-for-portrait that hides it. So it doesn't matter how many classes result in TRUE (show) for a particular view, as long as there is one FALSE (hide) an item will not display.

Marc McGee over 5 years ago

Thanks for the response Andrew. I am probably making this harder than it has to be.

I want something to NOT display on small devices, but display on everything else.
So should I use "show-for-large-only", or maybe "show-for-large-up" instead of hide-for-small-only?

I interpret hide-for-small-only as meaning hide the item but only on small devices.

Marc McGee over 5 years ago

This is one of the class descriptions shown on the Foundation 5 visibility Docs page.

strong class="show-for-medium-up" This text is shown on medium screens and up.

I applied this class as shown:

```<div class="orbit-caption show-for-medium-up">
      Caption Two.
    </div> 

Instead of the caption being visible on medium and up, it disappears, but then becomes visible when I reduce my screen width or view on iPhone.

The class is doing the exact opposite of what it's supposed to do.

I am perplexed and befuddled.

Andrew Patterson over 5 years ago

It looks to me like you are doing the right thing. hide-for-small, hide-for-small-only, show-for-medium-up should all do the same thing.

I wonder if orbit is confusing things. Try the classes outside of orbit to confirm how they normally work.

If you can provide a link to your site we can take a look and see if we can help troubleshoot.

Andrew P.

Marc McGee over 5 years ago

I'll try outside of orbit first.

Tried inserting the hide class first, in front of the orbit class thinking ordering my be an issue.

I am on old version of Safari 5.0.6. Still running Mac OS 10.5.8. Not sure whether that would be causing the issue or not. Hopefully not.

Marc McGee over 5 years ago

Tried outside of orbit and it seems to be doing the opposite.
Tried show-for-small and show-for-small-only and there seems to be no affect no matter how wide my browser window is.

Tried hide-for-small-only and the text disappears when the browser window is open wide, but then appears after I drag with browser window to a narrow/small position.

It's as if the class is doing the exact opposite of what I intend it to do — or think it should be doing.

Question: I am only inserting one class — be it hide or show. Should I be utilizing both? As in, build a div and give it the hide class, but then duplicate the div and give that a show class?

Marc McGee over 5 years ago

Still testing.

I tried "show-for-medium-up" on a div that contains a paragraph. The text disappears from my wide open browser, but then appears when the browser is narrowed. Exactly opposite. It SHOULD be showing up on medium screens and up, but instead it's only showing on a small screen.

Andrew Patterson over 5 years ago

It's time to test from another browser. If you can put it out somewhere that we can reach it that would be best.

Karl Ward over 5 years ago

I would like to see a link if possible ... It should not work as you describe, unless there is conflicting CSS. The visibility classes work as explained in the docs for all my tests.
http://foundation.zurb.com/docs/components/visibility.html

Karl Ward over 5 years ago

I did some research, and indeed the visibility classes don't see to work properly on your website. Further research shows there is something "wrong" with your Foundation css file ... where did you get it from?
http://www.desert-hills.com/assets/css/foundation.css

I tried replacing the CSS above in your document, injecting the CSS from CDNJS instead and the visibility classes suddenly work nicely ...
//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/css/foundation.min.css

I can't immediately say what the difference is between those two CSS files, but there is some type or something in yours ...

Marc McGee over 5 years ago

I downloaded my css directly from the Foundation 5 download. The only customization I did was to the web colors and for there to be no radius.
Let me review the css. The section of the CSS for the show and hide goes on forever with what seems to be rules for all of the screen breaks. Maybe that's OK and intended... I don't know

If anything, I can try another download and see if that resolves the issue. I see that you used the min.css. I chose to go with the uncompressed so I could more easily see the rules and make changes—though very minimal, if need be. At this point, the only changes I've made are to the font-family.

I really appreciate your taking the time to review the page. It's very kind and helpful of you.

Marc McGee over 5 years ago

Ya Know? I don't have a link to the normalize.css. Could that be the issue?
I started my page by copying and pasting the code from the index page that downloads with Foundation 5, and there is no link to normalize.css in that original file.

Marc McGee over 5 years ago

Adding normalize.css before the foundation.css had zero affect. However, uploading and linking to foundation.min.css instead of foundation.css did! Yahoo!

So—for whatever reason the foundation.css is corrupted. Either when it was downloaded, or maybe I messed something up. But I have only changed the font familes as far as I can tell.

I'll do the following:
1. Reupload the original foundation.css and see if the issue is resolved. If yes, then I must have messed something up. If no, then I know the original is corrupted.

  1. If corrupted, then I need to figure out how to uncompress the foundation.min.css

Getting closer as a result of your assistance. Thank you.

Marc McGee over 5 years ago

Hi Karl:

I re-uploaded the original foundation.css and the show / hide is working. Then updated the font family to my preferred web font and all is still working as it should.

Thank you again.