Menu icon Foundation
Hide for medium down

Is there a way to hide for medium down? I am trying to hide text and a button on orbit slides when the screen gets smaller then a tablet. On the small screens I only want to show the logo on the background slide. Or is there another way to make this transition smoother so when the screen gets small the copy and button are hidden? The website is here.

http://www.thekimfoundation.org/

<div>

Is there a way to hide for medium down? I am trying to hide text and a button on orbit slides when the screen gets smaller then a tablet. On the small screens I only want to show the logo on the background slide. Or is there another way to make this transition smoother so when the screen gets small the copy and button are hidden? The website is here.

http://www.thekimfoundation.org/

Will Moody over 2 years ago

Hello Pam

 

You could use the class="show-for-small-only" on the components you would like to hide,

information is here http://foundation.zurb.com/sites/docs/visibility.html

 

Will

Pam Bifaro over 2 years ago

I'm trying to hide the text and button on each slide for small screens not show them for small. Currently I am using hide-for-small-only but the text and button need to hide before they start moving under the purple banner and start looking like they are getting cut off. Here is my website.

http://www.thekimfoundation.org/

Will Moody over 2 years ago

Hi Pam

Sorry, I misread your original question.

The only way I can think of doing hide for medium down is to use the show-for-large-only, I have put together a codepen here  https://codepen.io/FatBuddha/pen/dRZPGG/ that works as you want I think.

When I looked at your website it appears the button and text is hidden on the smaller range of medium.

I know of no way to smoothly transition the hide/show

 

Will

Pam Bifaro over 2 years ago

I need it to show on medium and large and up as they sometimes look at this site on a plasma screen I tried show for medium up, show for large up and a combination of these and nothing works. I wonder if I create a media query for the break point that I want it to hide then a class in that break point to hide/show for those elements if that would work.

I might create a break point at around 950

Any thoughts???

Will Moody over 2 years ago

Hello Pam

 

Looks like that's feasible, this feed may be helpful http://foundation.zurb.com/forum/posts/37020-f6---custom-breakpoint-based-on-size-and-orientation.

Would be interested to know how you get on.

 

Will

Pam Bifaro over 2 years ago

I ended up creating a style to have the section fade to zero opacity and that seems to work good.

  .TransFade {
    opacity: 0;

 

Website

http://www.thekimfoundation.org/