Menu icon Foundation
hide-for-small not working

I'm trying to utilize this feature: "hide-for-small" but it's not working and I'm unsure of what I'm doing wrong.

<div class="row">
        <div class="large-12 column">
            <p class="extra hide-for-small">Every week we hand select our favourite finds.</p>
        	<h3 class="section-title">Weekly Promotions</h3> 
        </div>
    </div>
            

         

visibilityhide-for-small

I'm trying to utilize this feature: "hide-for-small" but it's not working and I'm unsure of what I'm doing wrong.

<div class="row">
        <div class="large-12 column">
            <p class="extra hide-for-small">Every week we hand select our favourite finds.</p>
        	<h3 class="section-title">Weekly Promotions</h3> 
        </div>
    </div>
            

         

Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan over 5 years ago

Hmmm, I think it will be best if you re-download Foundation CSS.

It's too difficult to debug 5,000 lines of CSS, and me finding the invalid CSS was just lucky.

I did a comparison with your version and the version in bower-foundation on GitHub and there were quite a few differences.

Wing-Hou Chan over 5 years ago

Hey Natasha!

Your markup is correct, so it should be working.

I would now check if any other classes interfere with .hide-for-small.

If you could post a link to the site in development that would help diagnosing the problem!

Rafi Benkual over 5 years ago

It is working here http://cdpn.io/KLcJr

Right click on the page, and click to console to see if there are any errors.

Natasha McDiarmid over 5 years ago
Natasha McDiarmid over 5 years ago

I'm getting this message:

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

Wing-Hou Chan over 5 years ago

Hey Natasha!

Are you using the CSS or SCSS version of Foundation?

Natasha McDiarmid over 5 years ago

css!

Wing-Hou Chan over 5 years ago

Okey dokey.

Go to line 1841 in foundation.css and add a closing curly brace ( } ).
Go to line 1848 in foundation.css and add another closing curly brace.

Then report on what happens!

I tested the validation on Foundation CSS and there was a parse error from line 1835 and I found some curly braces missing. Funny why it didn't show up as an error in the console.

I'm not sure if this will work as I tried testing in my Firefox's style editor but hide-for-small still wasn't parsed and I couldn't refresh otherwise I would lose the changes I made.

But never mind, try it out and I hope it works and if it doesn't at least we've taken a step!

Natasha McDiarmid over 5 years ago

I've updated as requested, and I'm still having issues. :(

Wing-Hou Chan over 5 years ago

Hmmm, I think it will be best if you re-download Foundation CSS.

It's too difficult to debug 5,000 lines of CSS, and me finding the invalid CSS was just lucky.

I did a comparison with your version and the version in bower-foundation on GitHub and there were quite a few differences.

Natasha McDiarmid over 5 years ago

Gosh, I'm such an idiot. I should have just done that from the start. That totally worked/helped.

Thanks, you the best!

Wing-Hou Chan over 5 years ago

No probs!

And Happy Coding!